Bootstrap 4 阶类似砌体的柱卡是水平的而不是垂直的

Question

Bootstrap4张包裹在.card-columns中时，是否可以从左到右订购？

从上到下（默认）：

1 3 5
2 4 6

从左到右：

1 2 3
4 5 6

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

Answer 1

CSS 列的顺序是从上到下，然后从左到右，因此呈现的列的顺序将是..

1  3  5
2  4  6

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

此外，启用 flexbox won't help because Bootstrap card-deck uses CSS columns (not flexbox) for the masonry effect. You can however use the card-deck and flexbox for equal height cards: http://www.codeply.com/go/YFFFWHVoRB

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

您可以使用新的 d-flex class 到 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>

Bootstrap 4 阶类似砌体的柱卡是水平的而不是垂直的

Bootstrap 4 order Masonry-like column cards horizontal instead of vertical

html

css

twitter-bootstrap

twitter-bootstrap-4