Bootstrap 4订购类似水泥的列卡水平而不是垂直 [英] Bootstrap 4 order Masonry-like column cards horizontal instead of vertical

问题描述

包裹在 .card-columns ？

自上而下（默认）：

1 3 5
2 4 6

从左至右：

1 2 3
4 5 6

推荐答案

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

The order of the CSS columns is top to bottom, then left to right so the order of the rendered columns will be..

1  3  5
2  4  6

无法更改CSS列的顺序。建议你使用另一个解决方案像Masonry。 https://github.com/twbs/bootstrap/issues/17882

There is no way to change the order of CSS columns. It's suggested you use another solution like Masonry. https://github.com/twbs/bootstrap/issues/17882

此外，启用 Flexbox不会有帮助因为Bootstrap card-deck 使用CSS列（不是flexbox）作为砖石效果。不过，您可以使用卡片和flexbox等高卡片： http://www.codeply.com/go/YFFFWHVoRB

Also, enabling 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 with flexbox ，而不是 card-deck ：

Another option is to use the grid along with flexbox instead of the 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>

这篇关于Bootstrap 4订购类似水泥的列卡水平而不是垂直的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！