我使用 Bootstrap 3 使用流动网格布局我的网站,但网格中的框没有排成一行。
可以看到:
当一个盒子比另一个高时,网格不会左对齐。
我怎样才能用一些 hack 来修复它?感谢帮助!
注意:盒子的高度是自动换行的内容。
我的html代码
<div class="row">
<?php foreach($contens as $content){?>
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
<div class="contents-block">
<div class="image"><img href="<?php echo $content['image'];?>" />
</div>
................ some code .............
</div>
</div>
<?php } ?>
</div>
最佳答案
我不确定您到底想完成什么,但是问题是由于列的内容高度不同引起的。有 3 种总体方法可以解决网格对齐/高度问题..
1. 像这样的纯 CSS 方法(使用 CSS3 列宽)..
2. 像这样的“clearfix”方法(需要每 x 列迭代一次)。这是方法recommended by Bootstrap known as "responsive resets" ..
http://bootply.com/89910 (此方法也有 a CSS-only 变体)
3. 最后,您可能想要使用 Isotope/Masonry 插件。这是一个使用 Isotope + Bootstrap 的工作示例。
2017 年更新
另一种选择是使列的高度相同(使用 flexbox):
由于问题是由高度差异引起的,您可以使每行的列等于高度。 Flexbox 是实现此目的的最佳方式,并且在 Bootstrap 4 中得到原生支持。
.row.display-flex {
display: flex;
flex-wrap: wrap;
}
.row.display-flex > [class*='col-'] {
display: flex;
flex-direction: column;
}
Bootstrap 4 使用 flexbox,因此默认情况下每行中的列高度相同(没有额外的 CSS)。
关于css - Bootstrap 3 流体网格布局问题?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19572753/