rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-18 15:54:26 +01:00
Code Issues Actions Packages Releases 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
}
.row-cols#{$infix}-auto > * {
@include make-col-auto();
}
@for $i from 1 through $grid-row-columns {
.row-cols#{$infix}-#{$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
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.
@ -306,6 +306,17 @@ Use these row columns classes to quickly create basic grid layouts or to control
</div>
{{< /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" >}}
<div class="container">
<div class="row row-cols-4">