mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-30 00:29:52 +02:00
Code Issues Releases Wiki Activity

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

Browse Source
This commit is contained in:
Anal-Retentive Squirrel Hunter
2021-06-03 12:18:00 -04:00
committed by GitHub
parent f14d1a4c17
commit f2b47e1c8a
2 changed files with 28 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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