不同高度列的引导行

Question

不同高度列的引导行我目前的情况如下：<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在前面第三行中最长的元素下。因此，每一行项目都是完全对齐的-虽然这很棒，但我希望每一项都直接放在最后一个元素(“砖石”布局)下。

Answer 1

这是个很受欢迎的引导问题，所以我更新扩展了Bootstrap 3和Bootstrap 4的答案.

这个自举3 "高度问题“因为列使用float:left..当一个列被“浮动”时，它被从文档的正常流中删除。它被移到左边或右边，直到它接触到它的包含盒的边缘。所以，当你不均匀柱高，正确的行为是将它们堆叠到最近的一侧。

注*以下选项适用于柱包裹情景在那里一次超过12个单位.row..对于那些不明白为什么会有连续12次以上，或者认为解决方案是“使用单独的行”。应该先读一下

---

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

1-“清除”方法 (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>

ClearFixDemo(单层)

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

还有一个纯CSS变体“清场”
css-只对表进行清除

---

2-使柱子保持相同的高度(使用柔性箱)：

因为这个问题是由差异在高度上，可以创建列。平等每一行的高度。Flexbox是最好的方法，并且是在引导4中本地支持...

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

Flexbox等高演示

---

用内联块代替.。

同样，高度问题只会因为列被浮动而发生。另一个选项是将列设置为display:inline-block和float:none..这也为垂直对齐提供了更大的灵活性。然而，有了这个解决方案，就必须有列之间没有HTML空格，否则内联块元素有额外的空间。会过早地包裹起来。

内联块修复演示

---

4-CSS 3柱法(类似砌体/Pinterest的解决方案)。

这不是引导带3的本机，而是另一种使用css多列..这种方法的一个缺点是，列顺序是自上而下的，而不是从左到右。引导4包括这种类型的解决方案。: 自举4砌体卡片演示.

引导3多列演示

5-砌体JavaScript/jQuery方法

最后，您可能需要使用诸如同位素/砖石之类的插件：

自举砌体演示
砖石示范2

---

关于Bootstrap可变高度列的更多信息

---

中的所有列都是等高的。自举4因为它默认使用柔性箱，所以“高度问题”不是问题。此外，Bootstrap 4还包括这种类型的多列解决方案：自举4砖石卡片演示.

Answer 2

由于某种原因，在没有.display-flx类的情况下，这对我有效。

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

Answer 3

我创建了另一个扩展(也是反应性的)到引导行。你可以试试这样的东西：

.row.flexRow   { display: flex;  flex-wrap: wrap;}