如何在可变高度垂直堆叠引导网格列？

Question

我有一组具有可变高度的引导网格列。此时由于高度的不同，它们出现在链接上的图像中。

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/