css - Bootstrap 3 流体网格布局问题？

Question

我使用 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>

Answer 1

我不确定您到底想完成什么，但是问题是由于列的内容高度不同引起的。有 3 种总体方法可以解决网格对齐/高度问题..

1. 像这样的纯 CSS 方法(使用 CSS3 列宽)..

http://bootply.com/85737

2. 像这样的“clearfix”方法(需要每 x 列迭代一次)。这是方法recommended by Bootstrap known as "responsive resets" ..

http://bootply.com/89910 (此方法也有 a CSS-only 变体)

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

http://bootply.com/61482

---

2017 年更新

另一种选择是使列的高度相同(使用 flexbox):

由于问题是由高度差异引起的，您可以使每行的列等于高度。 Flexbox 是实现此目的的最佳方式，并且在 Bootstrap 4 中得到原生支持。

.row.display-flex {
  display: flex;
  flex-wrap: wrap;
}
.row.display-flex > [class*='col-'] {
  display: flex;
  flex-direction: column;
}

Flexbox equal height Demo

Bootstrap 4 使用 flexbox，因此默认情况下每行中的列高度相同(没有额外的 CSS)。

---

More on Bootstrap Variable Height Columns