mirror/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-23 18:40:03 +00:00
Code Issues Projects Releases Wiki Activity

Add row-cols-auto and responsive variants

Browse Source
This commit is contained in:
Martijn Cuppens 2019-12-19 16:15:57 +01:00
parent 5ac9fe8967
commit fca5e35d13
2 changed files with 16 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
scss/mixins/_grid.scss
View File

@ -65,6 +65,10 @@
min-width: 0; // See https://github.com/twbs/bootstrap/issues/25410 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 { @for $i from 1 through $grid-row-columns {
.row-cols#{$infix}-#{$i} { .row-cols#{$infix}-#{$i} {
@include row-cols($i); @include row-cols($i);

13
site/content/docs/4.3/layout/grid.md
View File

@ -280,7 +280,7 @@ Don't want your columns to simply stack in some grid tiers? Use a combination of
### Row columns ### 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. Use these row columns classes to quickly create basic grid layouts or to control your card layouts.
@ -306,6 +306,17 @@ Use these row columns classes to quickly create basic grid layouts or to control
</div> </div>
{{< /example >}} {{< /example >}}
{{< 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" >}} {{< example class="bd-example-row" >}}
<div class="container"> <div class="container">
<div class="row row-cols-4"> <div class="row row-cols-4">