html - 如何垂直堆叠可变高度的 Bootstrap 网格列？

Question

我有一组高度可变的 Bootstrap 网格列。目前由于高度的差异，它们出现在链接中的图像中。

http://postimg.org/image/uj0xn582b/

但是，我需要的是避免高度较小的网格之间的空间，如图中的箭头和下面链接中的图像所示。

http://postimg.org/image/c2m2813vf/

我如何使用 bootstrap 实现此目的。如果无法通过 bootstrap 实现，我还有什么其他选择。

<div class="row">
<div class="col-md-4">
    <ul>
        <li class="veg">1</li>   
        <li class="veg">1</li>         
        <li class="veg">1</li>            
        <li class="veg">1</li>     
    </ul>
</div>
<div class="col-md-4">
    <ul>
        <li class="veg">1</li>   
        <li class="veg">1</li>            
        <li class="veg">1</li>            
        <li class="veg">1</li>            
        <li class="veg">1</li>            
        <li class="veg">1</li> 
        <li class="veg">1</li>            
        <li class="veg">1</li>            
        <li class="veg">1</li>  
        <li class="veg">1</li>     
    </ul>
</div>
<div class="col-md-4">
    <ul>
        <li class="veg">1</li>   
        <li class="veg">1</li>            
        <li class="veg">1</li>            
        <li class="veg">1</li>            
        <li class="veg">1</li>             
    </ul>
</div>
<div class="col-md-4">
    <ul>
        <li class="veg">1</li>   
        <li class="veg">1</li>             
    </ul>
</div>
<div class="col-md-4">
    <ul>
        <li class="veg">1</li>   
        <li class="veg">1</li>            
        <li class="veg">1</li>            
    </ul>
</div>
<div class="col-md-4">
    <ul>
        <li class="veg">1</li>   
        <li class="veg">1</li>            
        <li class="veg">1</li>            
        <li class="veg">1</li>             
    </ul>
</div>
<div class="col-md-4">
    <ul>
        <li class="veg">1</li>   
        <li class="veg">1</li>            
        <li class="veg">1</li>            
        <li class="veg">1</li>            
        <li class="veg">1</li>            
        <li class="veg">1</li>            
        <li class="veg">1</li>     
        <li class="veg">1</li>            
        <li class="veg">1</li>            
        <li class="veg">1</li>            
        <li class="veg">1</li>            
        <li class="veg">1</li>            
        <li class="veg">1</li>   
    </ul>
</div>
</div>

Answer 1

这与bootstrap无关

您可以使用绝对定位来手动放置元素，或者如果元素是动态添加的，您可以使用任何库，例如:-

瀑布 http://wlog.cn/waterfall/

砌体 http://masonry.desandro.com/