rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-11-29 11:24:18 +01:00
Code Issues Actions Packages Releases Activity

Combine duplicate documentation examples into one to fix the confusing text.

Browse Source 
fixes issue #28892
This commit is contained in:
Jonathan Hawkins 2019-06-20 21:47:24 -04:00 committed by XhmikosR
parent ac6eefd227
commit 39fc46fb71
1 changed files with 9 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -149,17 +149,21 @@ For example, here are two grid layouts that apply to every device and viewport,
{{< /example >}}
</div>
Equal-width columns can be broken into multiple lines, but there was a [Safari flexbox bug](https://github.com/philipwalton/flexbugs#flexbug-11) that prevented this from working without an explicit `flex-basis` or `border`. There are workarounds for older browser versions, but they shouldn't be necessary if you're up-to-date.
### Equal-width multi-line
Create equal-width columns that span multiple lines by inserting a `.w-100` where you want the columns to break to a new line. Make the breaks responsive by mixing the `.w-100` with some [responsive display utilities]({{< docsref "/utilities/display" >}}).
There was a [Safari flexbox bug](https://github.com/philipwalton/flexbugs#flexbug-11) that prevented this from working without an explicit `flex-basis` or `border`. There are workarounds for older browser versions, but they shouldn't be necessary if you're up-to-date.
<div class="bd-example-row">
{{< example >}}
<div class="container">
<div class="row">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">col</div>
<div class="col">col</div>
<div class="w-100"></div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
</div>
{{< /example >}}
@ -231,24 +235,6 @@ Use `col-{breakpoint}-auto` classes to size columns based on the natural width o
{{< /example >}}
</div>
### Equal-width multi-row
Create equal-width columns that span multiple rows by inserting a `.w-100` where you want the columns to break to a new line. Make the breaks responsive by mixing the `.w-100` with some [responsive display utilities]({{< docsref "/utilities/display" >}}).
<div class="bd-example-row">
{{< example >}}
<div class="container">
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="w-100"></div>
<div class="col">col</div>
<div class="col">col</div>
</div>
</div>
{{< /example >}}
</div>
## Responsive classes
Bootstrap's grid includes five tiers of predefined classes for building complex responsive layouts. Customize the size of your columns on extra small, small, medium, large, or extra large devices however you see fit.