How do I make card-columns order horizontally?

问题

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

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!

I've tried some variations using flexbox, but couldn't get anything to work. Does anyone have horizontal ordering working?

回答1:

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

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

回答2:

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/

I will give a test and give feedback how to use with 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 */
}

回答3:

The only thing that worked for me was integrating "bricklayer"

https://github.com/ademilter/bricklayer

来源：https://stackoverflow.com/questions/38704826/how-do-i-make-card-columns-order-horizontally

标签

css

twitter-bootstrap

bootstrap-4