diff options
Diffstat (limited to 'docs/_includes/css/grid.html')
| -rw-r--r-- | docs/_includes/css/grid.html | 62 |
1 files changed, 40 insertions, 22 deletions
diff --git a/docs/_includes/css/grid.html b/docs/_includes/css/grid.html index 992612e85..429ef90f9 100644 --- a/docs/_includes/css/grid.html +++ b/docs/_includes/css/grid.html @@ -13,6 +13,7 @@ <li>Columns create gutters (gaps between column content) via <code>padding</code>. That padding is offset in rows for the first and last column via negative margin on <code>.row</code>s.</li> <li>The negative margin is why the examples below are outdented. It's so that content within grid columns is lined up with non-grid content.</li> <li>Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three <code>.col-xs-4</code>.</li> + <li>If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.</li> <li>Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, applying any <code>.col-md-</code> class to an element will not only affect its styling on medium devices but also on large devices if a <code>.col-lg-</code> class is not present.</li> </ul> <p>Look to the examples for applying these principles to your code.</p> @@ -67,49 +68,49 @@ </thead> <tbody> <tr> - <th>Grid behavior</th> + <th class="text-nowrap">Grid behavior</th> <td>Horizontal at all times</td> <td colspan="3">Collapsed to start, horizontal above breakpoints</td> </tr> <tr> - <th>Container width</th> + <th class="text-nowrap">Container width</th> <td>None (auto)</td> <td>750px</td> <td>970px</td> <td>1170px</td> </tr> <tr> - <th>Class prefix</th> + <th class="text-nowrap">Class prefix</th> <td><code>.col-xs-</code></td> <td><code>.col-sm-</code></td> <td><code>.col-md-</code></td> <td><code>.col-lg-</code></td> </tr> <tr> - <th># of columns</th> + <th class="text-nowrap"># of columns</th> <td colspan="4">12</td> </tr> <tr> - <th>Column width</th> + <th class="text-nowrap">Column width</th> <td class="text-muted">Auto</td> <td>~62px</td> <td>~81px</td> <td>~97px</td> </tr> <tr> - <th>Gutter width</th> + <th class="text-nowrap">Gutter width</th> <td colspan="4">30px (15px on each side of a column)</td> </tr> <tr> - <th>Nestable</th> + <th class="text-nowrap">Nestable</th> <td colspan="4">Yes</td> </tr> <tr> - <th>Offsets</th> + <th class="text-nowrap">Offsets</th> <td colspan="4">Yes</td> </tr> <tr> - <th>Column ordering</th> + <th class="text-nowrap">Column ordering</th> <td colspan="4">Yes</td> </tr> </tbody> @@ -254,6 +255,23 @@ </div> {% endhighlight %} + <h3 id="grid-example-wrapping">Example: Column wrapping</h3> + <p>If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.</p> + <div class="bs-docs-grid"> + <div class="row show-grid"> + <div class="col-xs-9">.col-xs-9</div> + <div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div> + <div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div> + </div> + </div> +{% highlight html %} +<div class="row"> + <div class="col-xs-9">.col-xs-9</div> + <div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div> + <div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div> +</div> +{% endhighlight %} + <h3 id="grid-responsive-resets">Responsive column resets</h3> <p>With the four tiers of grids available you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a <code>.clearfix</code> and our <a href="#responsive-utilities">responsive utility classes</a>.</p> <div class="bs-docs-grid"> @@ -329,30 +347,30 @@ <h3 id="grid-nesting">Nesting columns</h3> - <p>To nest your content with the default grid, add a new <code>.row</code> and set of <code>.col-md-*</code> columns within an existing <code>.col-md-*</code> column. Nested rows should include a set of columns that add up to 12 or less.</p> + <p>To nest your content with the default grid, add a new <code>.row</code> and set of <code>.col-sm-*</code> columns within an existing <code>.col-sm-*</code> column. Nested rows should include a set of columns that add up to 12 or less (it is not required that you use all 12 available columns).</p> <div class="row show-grid"> - <div class="col-md-9"> - Level 1: .col-md-9 + <div class="col-sm-9"> + Level 1: .col-sm-9 <div class="row show-grid"> - <div class="col-md-6"> - Level 2: .col-md-6 + <div class="col-xs-8 col-sm-6"> + Level 2: .col-xs-8 .col-sm-6 </div> - <div class="col-md-6"> - Level 2: .col-md-6 + <div class="col-xs-4 col-sm-6"> + Level 2: .col-xs-4 .col-sm-6 </div> </div> </div> </div> {% highlight html %} <div class="row"> - <div class="col-md-9"> - Level 1: .col-md-9 + <div class="col-sm-9"> + Level 1: .col-sm-9 <div class="row"> - <div class="col-md-6"> - Level 2: .col-md-6 + <div class="col-xs-8 col-sm-6"> + Level 2: .col-xs-8 .col-sm-6 </div> - <div class="col-md-6"> - Level 2: .col-md-6 + <div class="col-xs-4 col-sm-6"> + Level 2: .col-xs-4 .col-sm-6 </div> </div> </div> |