我有一个刀片视图(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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。