赞助商

css – 每3列Bootstrap clearfix

发布时间:2019-07-11 发布网站:脚本之家
脚本之家收集整理的这篇文章主要介绍了css – 每3列Bootstrap clearfix脚本之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个刀片视图(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>

总结

以上是脚本之家为你收集整理的css – 每3列Bootstrap clearfix全部内容,希望文章能够帮你解决css – 每3列Bootstrap clearfix所遇到的程序开发问题。

如果觉得脚本之家网站内容还不错,欢迎将脚本之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:76874919,请注明来意。
标签: