本文介绍了Twitter Bootstrap不同高度的行和列的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我目前有类似:

<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不同高度的行和列的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-04 03:41
查看更多