twitter-bootstrap - 如何使 Bootstrap 列 div float /不清除其他 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 布局”或“Masonry 布局”。开箱即用的 Bootstrap 不是为此而构建的。我建议使用 Masonry library创建此布局，但如果您设置为使用 Bootstrap，则有一个 CSS3 解决方案可以使 Bootstrap 以这种方式运行 here .请注意，如果您使用 Bootstrap 解决方案，它需要 CSS3 属性 not supported by older browsers .

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