rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-17 09:52:29 +01:00
Code Issues Actions Packages Releases Activity

Fixes #5458: Clarify fluid nesting

Browse Source
This commit is contained in:
Mark Otto 2012-11-03 13:28:48 -07:00
parent 7ea343d570
commit c9dbd2d601
3 changed files with 38 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
docs/assets/css/docs.css
View File

@ -335,8 +335,14 @@ hr.soften {
margin-bottom: 0;
}
.show-grid .show-grid [class*="span"] {
margin-top: 5px;
}
.show-grid [class*="span"] [class*="span"] {
background-color: #ccc;
}
.show-grid [class*="span"] [class*="span"] [class*="span"] {
background-color: #999;
}

18
docs/scaffolding.html
View File

@ -301,13 +301,21 @@
</pre>
<h2>Fluid nesting</h2>
<p>Nesting with fluid grids is a bit different: the number of nested columns should not match the parent's number of columns. Instead, each level of nested columns are reset because each row takes up 100% of the parent column.</p>
<p>Fluid grids utilize nesting differently: each nested level of columns should add up to 12 columns. This is because the fluid grid uses percentages, not pixels, for setting widths.</p>
<div class="row-fluid show-grid">
<div class="span12">
Fluid 12
<div class="row-fluid show-grid">
<div class="span6">
Fluid 6
<div class="row-fluid show-grid">
<div class="span6">
Fluid 6
</div>
<div class="span6">
Fluid 6
</div>
</div>
</div>
<div class="span6">
Fluid 6
@ -320,7 +328,13 @@
&lt;div class="span12"&gt;
Fluid 12
&lt;div class="row-fluid"&gt;
&lt;div class="span6"&gt;Fluid 6&lt;/div&gt;
&lt;div class="span6"&gt;
Fluid 6
&lt;div class="row-fluid"&gt;
&lt;div class="span6"&gt;Fluid 6&lt;/div&gt;
&lt;div class="span6"&gt;Fluid 6&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="span6"&gt;Fluid 6&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;

18
docs/templates/pages/scaffolding.mustache vendored
View File

@ -230,13 +230,21 @@
</pre>
<h2>{{_i}}Fluid nesting{{/i}}</h2>
<p>{{_i}}Nesting with fluid grids is a bit different: the number of nested columns should not match the parent's number of columns. Instead, each level of nested columns are reset because each row takes up 100% of the parent column.{{/i}}</p>
<p>{{_i}}Fluid grids utilize nesting differently: each nested level of columns should add up to 12 columns. This is because the fluid grid uses percentages, not pixels, for setting widths.{{/i}}</p>
<div class="row-fluid show-grid">
<div class="span12">
{{_i}}Fluid 12{{/i}}
<div class="row-fluid show-grid">
<div class="span6">
{{_i}}Fluid 6{{/i}}
<div class="row-fluid show-grid">
<div class="span6">
{{_i}}Fluid 6{{/i}}
</div>
<div class="span6">
{{_i}}Fluid 6{{/i}}
</div>
</div>
</div>
<div class="span6">
{{_i}}Fluid 6{{/i}}
@ -249,7 +257,13 @@
&lt;div class="span12"&gt;
{{_i}}Fluid 12{{/i}}
&lt;div class="row-fluid"&gt;
&lt;div class="span6"&gt;{{_i}}Fluid 6{{/i}}&lt;/div&gt;
&lt;div class="span6"&gt;
{{_i}}Fluid 6{{/i}}
&lt;div class="row-fluid"&gt;
&lt;div class="span6"&gt;{{_i}}Fluid 6{{/i}}&lt;/div&gt;
&lt;div class="span6"&gt;{{_i}}Fluid 6{{/i}}&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="span6"&gt;{{_i}}Fluid 6{{/i}}&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;