不同高度列的引导行

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&nbsp;"高度问题“因为列使用float:left..当一个列被“浮动”时，它被从文档的正常流中删除。它被移到左边或右边，直到它接触到它的包含盒的边缘。所以，当你不均匀柱高，正确的行为是将它们堆叠到最近的一侧。注*以下选项适用于柱包裹情景在那里一次超过12个单位.row..对于那些不明白为什么会有连续12次以上，或者认为解决方案是“使用单独的行”。应该先读一下有几种方法可以解决这个问题。(2018年更新)1-“清除”方法&nbsp;(Bootstrap推荐的)像这样(每一次迭代都需要迭代X列)。这将强制每个X列数.。<div&nbsp;class="row"> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="col-md-4">Content</div> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="col-md-4">Content</div> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="col-md-4">Content</div> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="clearfix"></div> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="col-md-4">Content</div> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="col-md-4">Content</div> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="col-md-4">Content</div> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="clearfix"></div> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="col-md-4">Content</div> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="col-md-4">Content</div> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;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&nbsp;{ &nbsp;&nbsp;display:&nbsp;flex; &nbsp;&nbsp;flex-wrap:&nbsp;wrap; } .row.display-flex&nbsp;>&nbsp;[class*='col-']&nbsp;{ &nbsp;&nbsp;display:&nbsp;flex; &nbsp;&nbsp;flex-direction:&nbsp;column; }Flexbox等高演示用内联块代替.。同样，高度问题只会因为列被浮动而发生。另一个选项是将列设置为display:inline-block和float:none..这也为垂直对齐提供了更大的灵活性。然而，有了这个解决方案，就必须有列之间没有HTML空格，否则内联块元素有额外的空间。会过早地包裹起来。内联块修复演示4-CSS 3柱法(类似砌体/Pinterest的解决方案)。这不是引导带3的本机，而是另一种使用css多列..这种方法的一个缺点是，列顺序是自上而下的，而不是从左到右。引导4包括这种类型的解决方案。:&nbsp;自举4砌体卡片演示.引导3多列演示5-砌体JavaScript/jQuery方法最后，您可能需要使用诸如同位素/砖石之类的插件：自举砌体演示砖石示范2关于Bootstrap可变高度列的更多信息中的所有列都是等高的。自举4因为它默认使用柔性箱，所以“高度问题”不是问题。此外，Bootstrap 4还包括这种类型的多列解决方案：自举4砖石卡片演示.

Answer 2

由于某种原因，在没有.display-flx类的情况下，这对我有效。.row&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;flex; &nbsp;&nbsp;&nbsp;&nbsp;flex-wrap:&nbsp;wrap; } .row&nbsp;>&nbsp;[class*='col-']&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;flex; &nbsp;&nbsp;&nbsp;&nbsp;flex-direction:&nbsp;column; }

Answer 3

我创建了另一个扩展(也是反应性的)到引导行。你可以试试这样的东西：.row.flexRow &nbsp; { display: flex; &nbsp;flex-wrap: wrap;}