如何使卡列水平排序？

Question

我有一个智能滚动的卡片列表,虽然我喜欢它的外观card-columns,但从上到下排序却非常令人沮丧,如下所示: 1 4 7 2 5 8 3 6 9

对于内容加载多个项目的任何内容,此垂直排序似乎基本无用.如果我有50个项目,一些最不重要的项目将位于顶部!

我尝试过使用flexbox的一些变种,但无法使用任何东西.有没有人有水平订购工作？

Answer 1

在这里找到一个很好的基本解决方案(不是直接用于引导)用css设置一个垂直或水平的砌体http://w3bits.com/flexbox-masonry/

我将给出一个测试,并提供反馈如何使用bootstrap 4.

用于横向用途:

.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;
  }
}

垂直使用:

.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 */
} 

Answer 2

如所记录的，CSS列的顺序是从上到下，然后是从左到右，因此呈现的列的顺序是。

1  3  5
2  4  6

无法更改CSS列的顺序。建议您使用其他解决方案，例如砌体。https://github.com/twbs/bootstrap/issues/17882

Answer 3

唯一对我有用的是整合“瓦工”

• https://github.com/ademilter/bricklayer