twitter-bootstrap - 具有不同高度的 Bootstrap 流体网格系统

Question

我是 Bootstrap 的新手。我想使用具有不同高度和相同宽度的流体网格系统网格，如下图所示 .

我该如何实现？请帮助我。

Answer 1

使用“开箱即用”的 Bootstrap 做到这一点的唯一方法是使用 4 列并将项目堆叠在每列中。当您不知道每列中有多少项目时，这对于动态内容来说并不理想。此外，项目顺序从上到下，而不是从左到右。

<div class="container-fluid">
    <div class="row">
        <div class="col-md-3">
        <!--item1-->
        <!--item2-->
        <!--item3-->
        <!--item4-->
        </div>
        <div class="col-md-3">
        <!--item5-->
        <!--item6-->
        <!--item7-->
        <!--item8-->
        </div>
        <div class="col-md-3">
        <!--item-->
        <!--item-->
        <!--item-->
        </div>
        <div class="col-md-3">
        <!--item-->
        <!--item-->
        <!--item-->
        <!--item-->
        <!--item-->
        </div>
      </div>
</div>

---

否则，您必须使用像 Masonry 这样的 jQuery 插件。或 Isotope ，或使用 CSS3 多列。

Jquery插件方法

Bootstrap Masonry Demo
Bootstrap Masonry Demo 2

CSS3 列方法(类似 Masonry 的 CSS 解决方案)..

这不是 Bootstrap 3 的原生方法，而是另一种使用 CSS multi-columns 的方法.这种方法的一个缺点是列顺序是从上到下，而不是从左到右。

CSS3 multi-columns Demo

还有more detailed info in this answer类似的问题。

2018 年更新

Bootstrap 4 包含一个使用 CSS3 多列的类似 Masonry 的解决方案: Masonry cards Demo