Bootstrap 3流体网格布局问题？

Question

我使用Bootstrap 3用流体网格布局我的网站,但网格中的框不排成一排.

你可以看到:

当盒子比另一个盒子高时,网格不会保持对齐.

我怎么能用一些黑客修复它？谢谢你的帮助!

注意:框的高度是自动换行内容.

我的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列迭代一次).这是Bootstrap推荐的方法,称为"响应式重置".

http://bootply.com/89910(此方法还有一个仅限CSS的变体)

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等高度演示

有关Bootstrap变量高度列的更多信息