twitter-bootstrap 如何使卡片列水平排列？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38704826/
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
How do I make card-columns order horizontally?
提问by thouliha
I have a smart-scrolling list of cards, and while I love the look of card-columns, its pretty frustrating that it orders top to bottom, like so:
1 4 7
2 5 8
3 6 9
我有一个智能滚动的卡片列表，虽然我喜欢 的外观card-columns，但令人沮丧的是它从上到下排序，如下所示：
1 4 7
2 5 8
3 6 9
This vertical ordering seems basically useless for anything where the content loads more than a few items. If I have 50 items, some of the least important ones will be at the top!
对于内容加载超过几个项目的任何内容，这种垂直排序似乎基本无用。如果我有 50 个项目，那么一些最不重要的项目将排在最前面！
I've tried some variations using flexbox, but couldn't get anything to work. Does anyone have horizontal ordering working?
我已经使用 flexbox 尝试了一些变体，但没有任何效果。有没有人有横向排序工作？
采纳答案by Zim
As documented, 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
回答by karadayi
Found here a nice and basic solution (not directly for bootstrap) to set a masonry vertical or horizontal with css http://w3bits.com/flexbox-masonry/
在这里找到了一个不错的基本解决方案（不是直接用于引导程序）来使用 css http://w3bits.com/flexbox-masonry/设置砌体垂直或水平
I will give a test and give feedback how to use with bootstrap 4.
我将进行测试并提供反馈如何与 bootstrap 4 一起使用。
for horizontal usage:
水平使用：
.masonry {
display: flex;
flex-flow: row wrap;
margin-left: -8px; /* Adjustment for the gutter */
}
.masonry-brick {
flex: auto;
height: 250px;
min-width: 150px;
margin: 0 8px 8px 0; /* Some gutter */
}
.masonry-brick {
&:nth-child(4n+1){
width: 250px;
}
&:nth-child(4n+2){
width: 325px;
}
&:nth-child(4n+3){
width: 180px;
}
&:nth-child(4n+4){
width: 380px;
}
}
for vertical usage:
垂直使用：
.masonry {
display: flex;
flex-flow: column wrap;
max-height: 800px;
margin-left: -8px; /* Adjustment for the gutter */
}
.masonry-brick {
margin: 0 8px 8px 0; /* Some gutter */
}
回答by fguillen
The only thing that worked for me was integrating "bricklayer"
唯一对我有用的是整合“瓦工”
