Twitter Bootstrap不同高度的行和列 [英] Twitter Bootstrap Rows and Columns of different height

问题描述

我目前有类似：

<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方法（ Bootstrap ）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>

http://bootply.com/89910

还有一个仅限CSS的变体'clearfix'。

There is also a CSS-only variation of the 'clearfix'.

http://www.codeply.com/go/lUbs1JgXUd

这种使用column-width的CSS砖石方法。

A CSS masonry approach like this this using column-width..

http://www.bootply.com/120682

最后，您可能想要使用Isotope / Masonry插件。这是一个使用Isotope + Bootstrap的工作示例。

Finally you may want to use the Isotope/Masonry plugin. Here is a working example that uses Isotope + Bootstrap..

http://www.bootply.com/108697

这篇关于Twitter Bootstrap不同高度的行和列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！