0

I have a simple bootstrap card example here that used 14 cards http://www.bootply.com/1ERCHtYa8k. I used a media query to adjust the column count from the usual fixed count of 3 to more or less columns based on screen size.

For some reason at the large break point where I've specified 6 columns, it always shows 5. The other breakpoints work OK and i'm not sure why it's doing this or how to fix.

I've noticed as well that as i vary the card count, at large the number of columns changes in weird ways. For example the same example but with only 7 cards http://www.bootply.com/7yubrPSKgQ# when sized to large will only show 4 columns. Don't understand why.

I'm using latest Chrome on Windows 10 machine.

Any info/help appreciated. Thanks.

Flo Woo
  • 949
  • 1
  • 12
  • 26

1 Answers1

0

There seems to be some issue with column-count when all of the column content is the same height. The workaround described here of variable height content seems to work.

http://www.bootply.com/LsJ7Gxc4zZ

The issue with column-count is specific to CSS3/browser, not Bootstrap.

Community
  • 1
  • 1
Carol Skelly
  • 351,302
  • 90
  • 710
  • 624