Bootstrap 4阶砌体式柱卡水平而不是垂直答案

【问题标题】：Bootstrap 4 order Masonry-like column cards horizontal instead of verticalBootstrap 4阶砌体式柱卡水平而不是垂直
【发布时间】：2017-04-07 06:00:40
【问题描述】：

包裹在.card-columns中时是否可以从左到右订购Bootstrap 4 Cards？

从上到下（默认）：

1 3 5
2 4 6

从左到右：

1 2 3
4 5 6

由于高度不同，我有必要使用类似砌体的网格。

【问题讨论】：

你可以使用 css-flexbox
^ 打开_variables.scss 文件并找到$enable-flex 变量。将其从 false 更改为 true。

标签： html css twitter-bootstrap twitter-bootstrap-4

【解决方案1】：

CSS 列的顺序是从上到下，然后从左到右，所以渲染列的顺序将是..

1  3  5
2  4  6

无法更改 CSS 列的顺序。建议您使用其他解决方案，例如 Masonry。 https://github.com/twbs/bootstrap/issues/17882

另外，启用 flexbox won't help 因为 Bootstrap card-deck 使用 CSS 列（不是 flexbox）来实现砌体效果。但是，您可以将 card-deck 和 flexbox 用于等高卡片：http://www.codeply.com/go/YFFFWHVoRB

另一种选择是使用grid along with flexbox 而不是card-deck：

您可以将新的d-flex 类用于eliminate the extra CSS：

<div class="col-sm-4 d-flex pb-3">
    <div class="card card-block">
        Card. I'm just a simple card-block.
    </div>
</div>

【讨论】：