Bootstrap 4阶砌体式列卡水平而不是垂直

小编典典

css

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

从上到下（默认）：

1 3 5
2 4 6

左到右：

1 2 3
4 5 6

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

阅读 367

2020-05-16

共1个答案

小编典典

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

1  3  5
2  4  6

无法更改CSS列的顺序。建议您使用其他解决方案，

同样，启用flexbox也无济于事，因为Bootstrapcard-deck使用CSS列（不是flexbox）来实现砌体效果。但是，您可以将card-deckandflexbox用于等高卡 :

另一种选择是将网格与flexbox一起使用，而不是card-deck：

您可以使用新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>

2020-05-16