如何水平排列卡片列？

Question

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

这种垂直排序对于内容加载超过几个项目的任何内容似乎基本上没有用。如果我有 50 个项目，一些最不重要的项目将在顶部！

我尝试了一些使用 flexbox 的变体，但无法正常工作。有人有横向排序吗？

Answer 1

与 documented 一样，CSS 列的顺序是从上到下，然后从左到右，因此呈现的列的顺序将是..

1  3  5
2  4  6

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

Answer 2

在这里找到了一个很好的基本解决方案（不是直接用于 bootstrap），以使用 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 3

唯一对我有用的是整合 "bricklayer"

https://github.com/ademilter/bricklayer

如何水平排列卡片列？

How do I make card-columns order horizontally?

css

twitter-bootstrap

bootstrap-4