diff --git a/scss/_grid.scss b/scss/_grid.scss index 5f25e38f184be53c438d48289c399e93ff20d1ab..d36ee75d8874456f09700922ab5b6b2ceecdf44c 100644 --- a/scss/_grid.scss +++ b/scss/_grid.scss @@ -46,16 +46,6 @@ @include make-row(); } - @each $breakpoint in map-keys($grid-breakpoints) { - $infix: breakpoint-infix($breakpoint, $grid-breakpoints); - - @for $i from 1 through $grid-row-columns { - .row-cols#{$infix}-#{$i} { - @include row-cols($i); - } - } - } - // Remove the negative margin from default .row, then the horizontal padding // from all immediate children columns (to prevent runaway style inheritance). .no-gutters { diff --git a/scss/mixins/_grid-framework.scss b/scss/mixins/_grid-framework.scss index 649c28bf77a57f24283a120319b039b11220d609..80fc7cc4b3ee4e9b9ddbc5099c65c9f39c4927b0 100644 --- a/scss/mixins/_grid-framework.scss +++ b/scss/mixins/_grid-framework.scss @@ -33,6 +33,13 @@ flex-grow: 1; max-width: 100%; } + + @for $i from 1 through $grid-row-columns { + .row-cols#{$infix}-#{$i} { + @include row-cols($i); + } + } + .col#{$infix}-auto { flex: 0 0 auto; width: auto; diff --git a/scss/mixins/_grid.scss b/scss/mixins/_grid.scss index 8672e7c16375fdfdeaacf7b98c27992cb6abda34..339fd9c083d9bd7f830449c6f0314bedc4c44986 100644 --- a/scss/mixins/_grid.scss +++ b/scss/mixins/_grid.scss @@ -56,7 +56,8 @@ // numberof columns. Supports wrapping to new lines, but does not do a Masonry // style grid. @mixin row-cols($count) { - & > [class^="col"] { - flex: 0 0 calc(100% / #{$count}); + & > * { + flex: 0 0 100% / $count; + max-width: 100% / $count; } } diff --git a/site/docs/4.3/layout/grid.md b/site/docs/4.3/layout/grid.md index 3b79360fe34c54ded608d8536a1774299c3221f1..dbb7e00c5cb233636e895cf55d3ade92102b850a 100644 --- a/site/docs/4.3/layout/grid.md +++ b/site/docs/4.3/layout/grid.md @@ -381,6 +381,20 @@ Use these row columns classes to quickly create basic grid layouts or to control {% include example.html content=example %} </div> +<div class="bd-example-row"> +{% capture example %} +<div class="container"> + <div class="row row-cols-4"> + <div class="col">Column</div> + <div class="col">Column</div> + <div class="col-6">Column</div> + <div class="col">Column</div> + </div> +</div> +{% endcapture %} +{% include example.html content=example %} +</div> + You can also use the accompanying Sass mixin, `row-cols()`: {% highlight scss %}