diff options
| author | Martijn Cuppens <[email protected]> | 2019-12-19 16:15:57 +0100 |
|---|---|---|
| committer | Martijn Cuppens <[email protected]> | 2020-03-10 20:30:29 +0100 |
| commit | fca5e35d137a48c94d7a990b2f98a6e3e29d0a87 (patch) | |
| tree | 101d9a835a966963387cc9da93328515500a31db | |
| parent | 5ac9fe8967c0e1797223b18954addbd179bea90e (diff) | |
| download | bootstrap-fca5e35d137a48c94d7a990b2f98a6e3e29d0a87.tar.xz bootstrap-fca5e35d137a48c94d7a990b2f98a6e3e29d0a87.zip | |
Add row-cols-auto and responsive variants
| -rw-r--r-- | scss/mixins/_grid.scss | 4 | ||||
| -rw-r--r-- | site/content/docs/4.3/layout/grid.md | 13 |
2 files changed, 16 insertions, 1 deletions
diff --git a/scss/mixins/_grid.scss b/scss/mixins/_grid.scss index aa71a39a2..35283207d 100644 --- a/scss/mixins/_grid.scss +++ b/scss/mixins/_grid.scss @@ -65,6 +65,10 @@ min-width: 0; // See https://github.com/twbs/bootstrap/issues/25410 } + .row-cols#{$infix}-auto > * { + @include make-col-auto(); + } + @for $i from 1 through $grid-row-columns { .row-cols#{$infix}-#{$i} { @include row-cols($i); diff --git a/site/content/docs/4.3/layout/grid.md b/site/content/docs/4.3/layout/grid.md index 3ca213119..82ee25f1f 100644 --- a/site/content/docs/4.3/layout/grid.md +++ b/site/content/docs/4.3/layout/grid.md @@ -280,7 +280,7 @@ 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 shortcut. +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. @@ -308,6 +308,17 @@ Use these row columns classes to quickly create basic grid layouts or to control {{< example class="bd-example-row" >}} <div class="container"> + <div class="row row-cols-auto"> + <div class="col">Column</div> + <div class="col">Column</div> + <div class="col">Column</div> + <div class="col">Column</div> + </div> +</div> +{{< /example >}} + +{{< example class="bd-example-row" >}} +<div class="container"> <div class="row row-cols-4"> <div class="col">Column</div> <div class="col">Column</div> |