如何制作bootstrap列divs浮动/不清除其他div

Question

目前的HTML如下：

<div class="container">
   <div class="wrapper">
       <div class="definition col-md-4">
          [Term, definition, etc, in here] 
       </div>
       <div class="definition col-md-4">
          [Term, definition, etc, in here] 
       </div>
       <div class="definition col-md-4">
          [Term, definition, etc, in here] 
       </div>
       <div class="definition col-md-4">
          [Term, definition, etc, in here] 
       </div>
       <div class="definition col-md-4">
          [Term, definition, etc, in here] 
       </div>
       <div class="definition col-md-4">
          [Term, definition, etc, in here] 
       </div>
   </div>
</div>

然而，正如你所看到的，偶尔div不会浮在他们上方的div上。什么是使这些只是插入列的最佳方法？

Answer 1

您描述的布局类型通常被称为“Pinterest布局”或“砌体布局”。开箱即用的Bootstrap不是为此而构建的。我建议使用Masonry library创建此布局，但如果您使用Bootstrap，则有一个CSS3解决方案可以使Bootstrap以这种方式运行here。请注意，如果使用Bootstrap解决方案，则需要not supported by older browsers的CSS3属性。

基本上，它使用column-width和column-gap属性来设置列，而不是使用Bootstrap捆绑的CSS样式。