Html Bootstrap 4 order Masonry-like column cards 水平而不是垂直
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/40760869/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 4 order Masonry-like column cards horizontal instead of vertical
提问by Marvin
Is it possible to order Bootstrap 4 Cardsfrom left to right when wrapped in .card-columns?
包装时是否可以从左到右订购Bootstrap 4 卡.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.
由于高度不同，我有必要使用类似砌体的网格。
采纳答案by Zim
The order of the CSS columns is top to bottom, then left to right so the order of the rendered columns will be..
CSS 列的顺序是从上到下，然后从左到右，因此渲染列的顺序将是..
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
无法更改 CSS 列的顺序。建议您使用另一种解决方案，例如 Masonry。https://github.com/twbs/bootstrap/issues/17882
Also, enabling flexbox won't helpbecause Bootstrap card-deckuses CSS columns (not flexbox) for the masonry effect. You can however use the card-deckand flexbox for equal height cards: http://www.codeply.com/go/YFFFWHVoRB
此外，启用flexbox 也无济于事，因为 Bootstrapcard-deck使用 CSS 列（而不是 flexbox）来实现砌体效果。但是，您可以将card-deck和 flexbox 用于等高卡：http: //www.codeply.com/go/YFFFWHVoRB
Another option is to use the grid along with flexboxinstead of the card-deck:
另一种选择是将网格与 flexbox 一起使用，而不是card-deck：
You can use the new d-flexclass to eliminate the extra CSS:
您可以使用新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>
Related: How do I make card-columns order horizontally?
相关： 如何使卡片列水平排序？
