From ebfeaa4ad18aa67c8ff91ff483f1f3634b2afc85 Mon Sep 17 00:00:00 2001
From: ysds <ysds.code@gmail.com>
Date: Wed, 28 Aug 2019 23:37:39 +0900
Subject: [PATCH] Allow override default col width
---
scss/_grid.scss | 10 ----------
scss/mixins/_grid-framework.scss | 7 +++++++
scss/mixins/_grid.scss | 5 +++--
site/content/docs/4.3/layout/grid.md | 13 +++++++++++++
4 files changed, 23 insertions(+), 12 deletions(-)
diff --git a/scss/_grid.scss b/scss/_grid.scss
index 5f25e38f18..d36ee75d88 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 9aeafc06ea..567c04a73e 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 f0b6c52700..5918df1af3 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/content/docs/4.3/layout/grid.md b/site/content/docs/4.3/layout/grid.md
index 2d839968ff..454dcd4aec 100644
--- 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 >}}
--
GitLab