Move .col-* classes to same media query after .row-cols-* classes #34341
Conversation
There was a problem hiding this comment.
Fixes #34335 awesome!
CodePen showing the issue in v5.0.2: https://codepen.io/rocksolidsolutions/pen/zYZVeeq
CodePen showing the fix in this branch: https://codepen.io/rocksolidsolutions/pen/qBrzgKq
Building the dist files and running git diff v5.0.1 -- dist/css/bootstrap-grid.css and git diff v5.0.2 -- dist/css/bootstrap-grid.css both seem okay.
I suppose it would be good to check that #33621 is still fixed after this change.
There was a problem hiding this comment.
Per @lacutah #33530 expects row-cols* to override col. I theoretically like the cleanliness of having all of the row-cols* declarations together and all of the col declarations together (as with this PR) but doing so either breaks cols row-cols or breaks col-N col-breakpoint. I'm not sure how widespread each of these use cases are. But the simple solution (assuming both cases need to be supported) seems to be ordering the declarations first col then row-cols* then col-breakpoint*.
|
I agree with @danielkauffman here. We have an issue with this PR regarding
|
| @@ -92,6 +87,11 @@ | |||
| $infix: breakpoint-infix($breakpoint, $breakpoints); | |||
|
|
|||
| @include media-breakpoint-up($breakpoint, $breakpoints) { | |||
| // Provide basic `.col-{bp}` classes for equal-width flexbox columns | |||
| .col#{$infix} { | |||
There was a problem hiding this comment.
IMHO we should skip if $infix is empty, and prefer to set .col before any loop. Maybe hard-coded in our main grid file, maybe?
|
Punting on this for #34612 right now. |
Fixes #34335.