引导行与不同高度的列

我目前有这样的东西:

<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是不同高度的盒子,宽度都一样 – 我怎么能保持同样的“基于网格的布局”,而且所有的盒子都排列在一起,而不是完美的线条。

目前TWBS将把col-md-4的下一行放在前一行第三行中最长的元素下面,因此每一行项目都是完全alignment的,而这很棒,我希望每个项目都直接落在最后一个元素的下面

这是一个受欢迎的Bootstrap问题,所以我已经更新并扩展了答案。

Bootstrap“ 高度问题 ”是因为列使用float:left 。 当一个列被“浮动”时,它被从文档的正常stream程中取出。 它向左或向右移动,直到碰到包含盒子的边缘。 所以,当你的柱高不一样时 ,正确的行为就是把它们堆叠到最近的一边。

自举不均衡的包装列

注意 :下面的选项适用于单个.row中有多于12个col单元的 列封装场景 。 对于不明白为什么连续超过12列的读者,或者认为解决scheme是“使用单独的行”


有几种方法可以解决这个问题 (2017年更新)

1 –像这样的“clearfix”方式 ( 由Bootstrap推荐 )(需要每X列迭代一次)。 这将强制每隔X列包装…

在这里输入图像描述

 <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> 

Clearfix演示(单层)

Clearfix Demo(响应层) – 例如。 col-sm-6 col-md-4 col-lg-3

还有一个CSS的唯一变化的“清晰”
仅含CSS的纯表格


2 – 使列高度相同(使用flexbox):

由于问题是由高度差异引起的,因此可以使每列的列高度相等 。 Flexbox是做到这一点的最佳方式,并且在Bootstrap 4中本地支持

在这里输入图像描述

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

Flexbox等高度演示


3 – 取消浮动列使用内联块代替..

同样,高度问题只发生,因为列浮动。 另一个选项是将列设置为display:inline-blockfloat:none 。 这也为垂直alignment提供了更多的灵活性。 但是,使用这种解决scheme,列之间不能空格 ,否则内联块元素会有额外的空间,并且会过早地换行。

内联块修复演示


4 – CSS3列方法(类似CSS的CSS解决scheme)

这不是Bootstrap 3的本地特性,而是另一种使用CSS多列的方法 。 这种方法的一个缺点是列顺序是从上到下而不是从左到右。 Bootstrap 4将包括这种types的解决scheme: Bootstrap 4 Masonry Cards Demo 。

Bootstrap 3多栏演示

5 – 砌体JavaScript / jQuery方法

最后,你可能想使用一个插件,如同位素/砌体: 在这里输入图像描述

Bootstrap砌体演示
砌体演示2


有关Bootstrapvariables高度列的更多信息

在twitter靴子内的col的总和应该是每12次。这将保持一个干净的网格devise:

  <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> <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> <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> 

出于某种原因,这对我没有.display-flex类的工作

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