Bootstrap 4阶类砌体状的列卡水平而不是垂直

Question

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

从上到下(默认):

1 3 5
2 4 6

左到右:

1 2 3
4 5 6

由于高度的变化,我需要使用类似砌体的网格.

Answer 1

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

1  3  5
2  4  6

无法更改CSS列的顺序.建议您使用像砌体这样的其他解决方案.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:

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

相关: 如何使卡列水平排序？