如何使用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网格系统。即：

我知道这可以用plugins来完成，但我想看看是否有更纯粹的（即使它必须是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的浮点数（在你的前{。{1}}中）;

所以基本上不可能让不同行中的元素彼此相邻，你需要更改标记;

另一方面，使用bootstrap响应列系统可能有助于产生CSS-Masonry效果：
你可以尝试在一行中放置你想要产生砌体效果的所有“col-items”， 显示为内联块（加上可能还有一些其他的小调整......）应该做的伎俩（如果你只是坚持使用CSS，这就是你的方法。）;

总之 记住Masonry诞生并且仍然是一个JavaScript网格布局库，所以即使你可以使用CSS，我建议你使用JS。

感谢Desandro这一令人敬畏的想法，感谢他们;

Answer 3

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

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

Answer 4

我做了一个简单的砌体网格，接收来自DB的图像，只需像这样的css：

    <div class="container">
    <div class="col-lg-12 col-sm-12 col-md-12 col-xs-12"> 
    <a href="<?php echo $src; ?>" class="fancybox" data-fancybox="group" id="<?php echo $count; ?>" rel="<?php the_ID(); ?>">
    <div class="image-gallerie">                                                        
    <img src="<?php echo $src; ?>" class="img-gallerie lazy" alt="Gallery image" id="<?php echo $count; ?>" />                                              

    </div> 
    </a>  
    </div>
    </div>

    .container {
    -moz-column-width: 35em;
    -webkit-column-width: 35em;
    -moz-column-gap: 1em;
    -webkit-column-gap:1em;  
    }

    .image-gallerie {
     width:  100%; 
     }
    .image-gallerie img{
     width: 100%;
     height: 100%;
     margin-top: 15px;
      margin-bottom: 10px;
    }