如何使用bootstrap 3网格系统和css创建砌体效果

Question

我的问题是我想使用bootstrap 3网格系统以块格式显示数据,但是我不希望从高度发生的恼人的空白间隙被限制在上面的行.例如,如果我这样做:

<div class="row">
    <div class="col-lg-4">post</div>
    <div class="col-lg-4">longer post that is going to take more height than the others</div>
    <div class="col-lg-4">post</div>
</div>
<div class="row">
    <div class="col-lg-4">post</div>
    <div class="col-lg-4">post</div>
    <div class="col-lg-4">post</div>
</div>

那么我将留下两行之间的空白,我想要实现的是一个砌体效果(后填充位于其上方的帖子附近),只使用CSS,特别是bootstrap 3网格系统.IE:

我知道这可以通过插件完成,但我想看看是否有更纯粹的(即使它必须是hacky)解决方案.有任何想法吗？

Answer 1

我们在一个站点上做了这个,我们做的是将网格放在垂直行中.

例:

<div class="row">
  <div class="col-lg-4">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  <div class="col-lg-4">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  <div class="col-lg-4">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
<div>

Answer 2

在Bootstap中， .row元素用于清除其所包含的div-blocks / col的浮动（在您的ex中col-lg-4）；

因此，将不同行中的元素彼此并排放置基本上是不可能的，您必须更改标记。

另一方面，使用引导响应列系统可能有助于产生CSS砌体效果：
您可以尝试将要产生砌体效果的所有“ col-items” 放在一行中，显示为inline-block（plus也许其他一些小调整..）应该可以解决这个问题（如果只使用CSS，这就是方法。）

最后，请记住Masonry诞生了，并且仍然是一个JavaScript网格布局库，因此即使您可以使其与CSS一起使用，我还是建议您使用JS。

一千个感谢Desandro的出色创意；

Answer 3

在 Bootstrap 4 中，您可以使用.card-columns，请参见此处：https : //v4-alpha.getbootstrap.com/components/card/

虽然我建议使用同位素，因为 JS 比 CSS 提供更多的控制和更好的兼容性。