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

Fixes #36550

Browse Source
This commit is contained in:
Mark Otto
2022-06-12 08:22:22 -07:00
committed by Mark Otto
parent 0a3864641b
commit a9ef305b81
1 changed files with 73 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

144
site/content/docs/5.2/layout/grid.md
View File

@@ -63,77 +63,79 @@ Bootstrap's grid system can adapt across all six default breakpoints, and any br
As noted above, each of these breakpoints have their own container, unique class prefix, and modifiers. Here's how the grid changes across these breakpoints: As noted above, each of these breakpoints have their own container, unique class prefix, and modifiers. Here's how the grid changes across these breakpoints:
<table class="table mb-4"> <div class="table-responsive">
<thead> <table class="table mb-4">
<tr> <thead>
<th scope="col"></th> <tr>
<th scope="col"> <th scope="col"></th>
xs<br> <th scope="col">
<span class="fw-normal">&lt;576px</span> xs<br>
</th> <span class="fw-normal">&lt;576px</span>
<th scope="col"> </th>
sm<br> <th scope="col">
<span class="fw-normal">&ge;576px</span> sm<br>
</th> <span class="fw-normal">&ge;576px</span>
<th scope="col"> </th>
md<br> <th scope="col">
<span class="fw-normal">&ge;768px</span> md<br>
</th> <span class="fw-normal">&ge;768px</span>
<th scope="col"> </th>
lg<br> <th scope="col">
<span class="fw-normal">&ge;992px</span> lg<br>
</th> <span class="fw-normal">&ge;992px</span>
<th scope="col"> </th>
xl<br> <th scope="col">
<span class="fw-normal">&ge;1200px</span> xl<br>
</th> <span class="fw-normal">&ge;1200px</span>
<th scope="col"> </th>
xxl<br> <th scope="col">
<span class="fw-normal">&ge;1400px</span> xxl<br>
</th> <span class="fw-normal">&ge;1400px</span>
</tr> </th>
</thead> </tr>
<tbody> </thead>
<tr> <tbody>
<th class="text-nowrap" scope="row">Container <code class="fw-normal">max-width</code></th> <tr>
<td>None (auto)</td> <th class="text-nowrap" scope="row">Container <code class="fw-normal">max-width</code></th>
<td>540px</td> <td>None (auto)</td>
<td>720px</td> <td>540px</td>
<td>960px</td> <td>720px</td>
<td>1140px</td> <td>960px</td>
<td>1320px</td> <td>1140px</td>
</tr> <td>1320px</td>
<tr> </tr>
<th class="text-nowrap" scope="row">Class prefix</th> <tr>
<td><code>.col-</code></td> <th class="text-nowrap" scope="row">Class prefix</th>
<td><code>.col-sm-</code></td> <td><code>.col-</code></td>
<td><code>.col-md-</code></td> <td><code>.col-sm-</code></td>
<td><code>.col-lg-</code></td> <td><code>.col-md-</code></td>
<td><code>.col-xl-</code></td> <td><code>.col-lg-</code></td>
<td><code>.col-xxl-</code></td> <td><code>.col-xl-</code></td>
</tr> <td><code>.col-xxl-</code></td>
<tr> </tr>
<th class="text-nowrap" scope="row"># of columns</th> <tr>
<td colspan="6">12</td> <th class="text-nowrap" scope="row"># of columns</th>
</tr> <td colspan="6">12</td>
<tr> </tr>
<th class="text-nowrap" scope="row">Gutter width</th> <tr>
<td colspan="6">1.5rem (.75rem on left and right)</td> <th class="text-nowrap" scope="row">Gutter width</th>
</tr> <td colspan="6">1.5rem (.75rem on left and right)</td>
<tr> </tr>
<th class="text-nowrap" scope="row">Custom gutters</th> <tr>
<td colspan="6"><a href="{{< docsref "/layout/gutters" >}}">Yes</a></td> <th class="text-nowrap" scope="row">Custom gutters</th>
</tr> <td colspan="6"><a href="{{< docsref "/layout/gutters" >}}">Yes</a></td>
<tr> </tr>
<th class="text-nowrap" scope="row">Nestable</th> <tr>
<td colspan="6"><a href="#nesting">Yes</a></td> <th class="text-nowrap" scope="row">Nestable</th>
</tr> <td colspan="6"><a href="#nesting">Yes</a></td>
<tr> </tr>
<th class="text-nowrap" scope="row">Column ordering</th> <tr>
<td colspan="6"><a href="{{< docsref "/layout/columns#reordering" >}}">Yes</a></td> <th class="text-nowrap" scope="row">Column ordering</th>
</tr> <td colspan="6"><a href="{{< docsref "/layout/columns#reordering" >}}">Yes</a></td>
</tbody> </tr>
</table> </tbody>
</table>
</div>
## Auto-layout columns ## Auto-layout columns