每3列Bootstrap clearfix

Question

我有一个刀片视图(Laravel 5)以这种方式列出所有产品:

<div class="row">
    @foreach($products as $p)
        <div class="col-lg-4 col-md-6 col-sm-6">
            <a class="thumbnail" href="#?">
                <img src="{{ asset('img/logo.png') }}" alt=""/>
            </a>
            <h5>{{ $p->name }}</h5>
            <p>{{ $p->details }}</p>
        </div>
    @endforeach
</div>

我正在尝试做的是强制网格系统在桌面上的每一行中放置3列,在平板电脑上放置2列.我听说我可以使用clearfix,但是当我@endforeach像这样添加它之前:<div class="clearfix visible-lg"></div>我得到一个'单列'布局,而不是每行3列.我发现很难理解的是如何添加clearfix来强制"新行"(如果这是真正正确的方法).

Answer 1

您的列很可能具有不同的高度,这与像Bootstrap这样的网格在浮点数和清除方面是一个常见问题.Bootstrap确实有一个实用工具,但它并不总是一个很好的选择.请参阅重置.

替代.

由于您的列设置了2个不同的断点,col-lg-4并且col-sm-6(因为它等于您的小类col-sm-6,因此不需要col-md-6),您必须清除相应断点处的列.

确保在实现时特定,因此它不会影响您在其他地方使用的网格的任何其他部分.为每列添加泛型类或使用类似下面的示例等.

一种方法是将所需的规则与媒体查询一起放在列的Pseudo Classes中.另见MDN nth-child.

工作实例:

@media (min-width: 1200px) {
  .grid .col-lg-4:nth-child(3n+1) {
    clear: left;
  }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .grid .col-sm-6:nth-child(2n+1) {
    clear: left;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row grid">

    <div class="col-lg-4 col-sm-6">
      <a class="thumbnail" href="#">
        <img src="http://placehold.it/350x350" alt="" />
      </a>
      <h5>ONE</h5>
      <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
    </div>

    <div class="col-lg-4 col-sm-6">
      <a class="thumbnail" href="#">
        <img src="http://placehold.it/550x550" alt="" />
      </a>
      <h5>TWO</h5>
      <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
    </div>

    <div class="col-lg-4 col-sm-6">
      <a class="thumbnail" href="#">
        <img src="http://placehold.it/350x450" alt="" />
      </a>
      <h5>THREE</h5>
      <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
    </div>

    <div class="col-lg-4 col-sm-6">
      <a class="thumbnail" href="#">
        <img src="http://placehold.it/250x500" alt="" />
      </a>
      <h5>FOUR</h5>
      <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
    </div>

    <div class="col-lg-4 col-sm-6">
      <a class="thumbnail" href="#">
        <img src="http://placehold.it/350x150" alt="" />
      </a>
      <h5>FIVE</h5>
      <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
    </div>

  </div>
</div>