kotovalexarian-likes-github
/
twbs--bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Releases Activity

Allow individual grid classes to override `.row-cols` (#33621)

This commit is contained in:
Anal-Retentive Squirrel Hunter 2021-06-03 12:18:00 -04:00 committed by GitHub
parent f14d1a4c17
commit f2b47e1c8a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 28 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
scss/mixins/_grid.scss
View File

@ -65,8 +65,8 @@
@mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {
@each $breakpoint in map-keys($breakpoints) {
// .row-cols defaults must all appear before .col overrides so they can be overridden.
$infix: breakpoint-infix($breakpoint, $breakpoints);
@include media-breakpoint-up($breakpoint, $breakpoints) {
// Provide basic `.col-{bp}` classes for equal-width flexbox columns
.col#{$infix} {
@ -84,7 +84,13 @@
}
}
}
}
}
@each $breakpoint in map-keys($breakpoints) {
$infix: breakpoint-infix($breakpoint, $breakpoints);
@include media-breakpoint-up($breakpoint, $breakpoints) {
.col#{$infix}-auto {
@include make-col-auto();
}

23
site/content/docs/5.0/layout/grid.md
View File

@ -299,9 +299,9 @@ 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. With `.row-cols-auto` you can give the columns their natural width.
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 default for contained columns. 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 and override when needed at the column level.
{{< example class="bd-example-row" >}}
<div class="container">
@ -369,6 +369,25 @@ 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-2 row-cols-lg-3">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col-4 col-lg-2">Column</div>
<div class="col-4 col-lg-2">Column</div>
<div class="col-4 col-lg-2">Column</div>
<div class="col-4 col-lg-2">Column</div>
<div class="col-4 col-lg-2">Column</div>
<div class="col-4 col-lg-2">Column</div>
</div>
</div>
{{< /example >}}
You can also use the accompanying Sass mixin, `row-cols()`:
```scss