问题描述
我目前有类似:
<div class="row">
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
</div>
现在假设 content
不同的高度,具有相同的宽度 - 我怎么能保持相同的基于网格的布局,但所有的盒子在彼此之下排列,而不是在完美的线条。
Now assuming that, content
was boxes of different height, with all the same width - how could I keep the same "grid based layout" and yet have all the boxes line up under each other, instead of in perfect lines.
目前,TWBS会将 col-md-4
的下一行放在前一第三行的最长元素下,因此每行项目完全对齐一个干净 -
Currently TWBS will place the next line of col-md-4
under the longest element in the previous third row., thus each row of items is perfectly aligned an clean - while this is awesome I want each item to fall directly under the last element
推荐答案
你有4个选项..
clearfix方法()like this(requires iteration every x columns)..
A 'clearfix' approach (recommended by Bootstrap) like this (requires iteration every x columns)..
<div class="row">
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="clearfix"></div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="clearfix"></div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
</div>
还有一个仅限CSS的变体'clearfix'。
There is also a CSS-only variation of the 'clearfix'.
这种使用column-width的CSS砖石方法。
A CSS masonry approach like this this using column-width..
最后,您可能想要使用Isotope / Masonry插件。这是一个使用Isotope + Bootstrap的工作示例。
Finally you may want to use the Isotope/Masonry plugin. Here is a working example that uses Isotope + Bootstrap..
这篇关于Twitter Bootstrap不同高度的行和列的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!