Allow override default col width

diff --git a/scss/_grid.scss b/scss/_grid.scss
index 5f25e38f184be53c438d48289c399e93ff20d1ab..d36ee75d8874456f09700922ab5b6b2ceecdf44c 100644 (file)
--- 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 9aeafc06eaae1881c72157add47f54a59d348281..567c04a73ec404e9d670aeff100feaf37d7b9733 100644 (file)
--- 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 f0b6c5270031a63d50b055769c939fd7d3f84a00..5918df1af30ec268efeabe2e84252552c425d46e 100644 (file)
--- 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/content/docs/4.3/layout/grid.md b/site/content/docs/4.3/layout/grid.md
index 2d839968ffeaf7e3c9a3ce0051a62a838029b67f..454dcd4aecfbc297ee1bab21dd6735fdf2b17ba4 100644 (file)
--- a/site/content/docs/4.3/layout/grid.md
+++ b/site/content/docs/4.3/layout/grid.md
@@ -369,6 +369,19 @@ Use these row columns classes to quickly create basic grid layouts or to control
 {{< /example >}}
 </div>
 
+<div class="bd-example-row">
+{{< 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>
+{{< /example >}}
+</div>
+
 You can also use the accompanying Sass mixin, `row-cols()`:
 
 {{< highlight scss >}}