Bootstrap 4按照Masonry式列卡片的水平顺序排列，而非垂直排列。

Question

在使用.card-columns时，是否可以将Bootstrap 4 Cards从左到右排序？

从上到下（默认）：

1 3 5
2 4 6

从左至右：

1 2 3
4 5 6

由于高度不同，我需要使用类似砖石结构的网格。

- Marvin

---

您可以使用 CSS 弹性盒子布局 (Flexbox) 完成该操作。 - ADH - THE TECHIE GUY

打开 _variables.scss 文件，找到 $enable-flex 变量。把它从 false 改为 true。 - ksav

Answer 1

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

1  3  5
2  4  6

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

此外，启用flexbox也没有帮助，因为Bootstrap card-deck使用CSS列（而不是flexbox）实现砌体效果。但您可以使用card-deck和flexbox来获得等高卡片：http://www.codeply.com/go/YFFFWHVoRB

另一个选项是使用网格与flexbox而不是card-deck：http://www.codeply.com/go/jbcgzs2Nzq

您可以使用新的d-flex类来消除额外的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>

相关： 如何使卡片列水平排列？

- Zim