Bootstrap每3列修复一次 [英] Bootstrap clearfix every 3 columns

问题描述

我有一个叶片视图（Laravel 5），以这种方式列出所有产品：

I've got a blade view (Laravel 5) that lists all products this way:

<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强制一个新行（如果这是真正的方法）。

What I'm trying to do is forcing the grid system to put 3 columns in each row on desktops and 2 columns on tablets. I heard out there that I can use a clearfix, but when I add it right before @endforeach like this: <div class="clearfix visible-lg"></div> I get a 'one-column' layout, instead of 3 columns per row. What i'm finding hard to understand is how to add the clearfix to force a 'new row' (if that is really the right approach).

推荐答案

您的列最有可能是不同的高度，这是网格的常见问题，如 Bootstrap 关于 float s& 清除。 Bootstrap有一个工具可以工作，但它并不总是一个好的选择。请参见重置。

Your columns are most likely of varying heights which is a common issue with grids like Bootstrap with regard to floats & clear. Bootstrap does have a utility to work with but it's not always a great choice. See Resets.

另一种方法。

由于您的列有两个不同的断点， col-lg-4 col-sm-6 （不需要col-md-6，因为它等于你的小类col-sm-6），你必须清除列适当的断点。

Since you have 2 different breakpoints that your columns are set at, col-lg-4 and col-sm-6 (col-md-6 isn't needed since it's equal to your small class of col-sm-6), you have to clear the columns at the appropriate breakpoints.

确保在实现时具体，这样它不会影响您可能在其他地方使用的网格的任何其他部分。为每个列添加一个通用类或使用类似下面的示例等。

一种方法是将所需的规则放入媒体查询与 Pseudo 类的列结合使用。另请参阅MDN 第n个子级。

One way to do this is to place the needed rules inside of media queries in conjunction with Pseudo Classes for the columns. Also see 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>

这篇关于Bootstrap每3列修复一次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！