我有一个刀片视图(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来强制“新行”(如果这是真正正确的方法).
解决方法
您的列很可能具有不同的高度,这对于像
Bootstrap这样的网格来说是一个常见的问题.
clear.Bootstrap确实有一个实用工具,但它并不总是一个很好的选择.见
Resets.
替代.
由于你的列有两个不同的断点,col-lg-4和col-sm-6(不需要col-md-6,因为它等于你的小类col-sm-6),你必须在适当的断点处清除列.
确保在实现时特定,因此它不会影响您在其他地方使用的网格的任何其他部分.为每列添加泛型类或使用类似下面的示例等.
一种方法是将所需的规则与媒体查询一起放在列的Pseudo类中.另见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>
