From 906a990eb711808fd20d78c95272dbd02332be97 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 28 Jul 2021 21:29:46 -0600 Subject: [PATCH] Revert "Allow individual grid classes to override `.row-cols` (#33621)" (#34612) This reverts commit f2b47e1c8a263f4406255991af9fd55984c22a0e. --- scss/mixins/_grid.scss | 8 +------- site/content/docs/5.0/layout/grid.md | 23 ++--------------------- 2 files changed, 3 insertions(+), 28 deletions(-) diff --git a/scss/mixins/_grid.scss b/scss/mixins/_grid.scss index 41760ef4ea..59cc563762 100644 --- a/scss/mixins/_grid.scss +++ b/scss/mixins/_grid.scss @@ -66,8 +66,8 @@ @mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) { @each $breakpoint in map-keys($breakpoints) { - // .row-cols defaults must all appear before .col overrides so they can be overridden. $infix: breakpoint-infix($breakpoint, $breakpoints); + @include media-breakpoint-up($breakpoint, $breakpoints) { // Provide basic `.col-{bp}` classes for equal-width flexbox columns .col#{$infix} { @@ -85,13 +85,7 @@ } } } - } - } - @each $breakpoint in map-keys($breakpoints) { - $infix: breakpoint-infix($breakpoint, $breakpoints); - - @include media-breakpoint-up($breakpoint, $breakpoints) { .col#{$infix}-auto { @include make-col-auto(); } diff --git a/site/content/docs/5.0/layout/grid.md b/site/content/docs/5.0/layout/grid.md index 6520019641..05fc1bd65d 100644 --- a/site/content/docs/5.0/layout/grid.md +++ b/site/content/docs/5.0/layout/grid.md @@ -299,9 +299,9 @@ Don't want your columns to simply stack in some grid tiers? Use a combination of ### Row columns -Use the responsive `.row-cols-*` classes to quickly set the number of columns that best render your content and layout. Whereas normal `.col-*` classes apply to the individual columns (e.g., `.col-md-4`), the row columns classes are set on the parent `.row` as a default for contained columns. With `.row-cols-auto` you can give the columns their natural width. +Use the responsive `.row-cols-*` classes to quickly set the number of columns that best render your content and layout. Whereas normal `.col-*` classes apply to the individual columns (e.g., `.col-md-4`), the row columns classes are set on the parent `.row` as a shortcut. With `.row-cols-auto` you can give the columns their natural width. -Use these row columns classes to quickly create basic grid layouts or to control your card layouts and override when needed at the column level. +Use these row columns classes to quickly create basic grid layouts or to control your card layouts. {{< example class="bd-example-row" >}}
@@ -369,25 +369,6 @@ Use these row columns classes to quickly create basic grid layouts or to control
{{< /example >}} -{{< example class="bd-example-row" >}} -
-
-
Column
-
Column
-
Column
-
Column
-
Column
-
Column
-
Column
-
Column
-
Column
-
Column
-
Column
-
Column
-
-
-{{< /example >}} - You can also use the accompanying Sass mixin, `row-cols()`: ```scss