Bootstrap 4 order Masonry-like column cards 水平而不是垂直 [英] Bootstrap 4 order Masonry-like column cards horizontal instead of vertical

问题描述

如果包裹在 .card-columns 中，是否可以从左到右订购 Bootstrap 4 Cards?

从上到下(默认):

1 3 52 4 6

从左到右:

1 2 34 5 6

由于高度不同，我需要使用类似砌体的网格.

解决方案

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

1 3 52 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

另一种选择是使用 grid 和 flexbox 而不是 card-甲板:

您可以使用新的 d-flex 类来消除额外的 CSS:

<div class="card card-block">卡片.我只是一个简单的卡块.

相关:如何使卡片列横向排列?

Is it possible to order Bootstrap 4 Cards from left to right when wrapped in .card-columns?

Top to bottom (default):

1 3 5
2 4 6

Left to right:

1 2 3
4 5 6

Because of the varying height it is necessary for me to use an Masonry-like grid.

解决方案

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

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

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

Another option is to use the grid along with flexbox instead of the card-deck:

You can use the new d-flex class to 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>

Related: How do I make card-columns order horizontally?

这篇关于Bootstrap 4 order Masonry-like column cards 水平而不是垂直的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！