diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 60782ecea4..c08d529aa1 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -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; +} diff --git a/docs/scaffolding.html b/docs/scaffolding.html index ec548ace22..5261ea6160 100644 --- a/docs/scaffolding.html +++ b/docs/scaffolding.html @@ -301,13 +301,21 @@

Fluid nesting

-

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.

+

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.

Fluid 12
Fluid 6 +
+
+ Fluid 6 +
+
+ Fluid 6 +
+
Fluid 6 @@ -320,7 +328,13 @@ <div class="span12"> Fluid 12 <div class="row-fluid"> - <div class="span6">Fluid 6</div> + <div class="span6"> + Fluid 6 + <div class="row-fluid"> + <div class="span6">Fluid 6</div> + <div class="span6">Fluid 6</div> + </div> + </div> <div class="span6">Fluid 6</div> </div> </div> diff --git a/docs/templates/pages/scaffolding.mustache b/docs/templates/pages/scaffolding.mustache index 85ae5ea029..99bdb46f5e 100644 --- a/docs/templates/pages/scaffolding.mustache +++ b/docs/templates/pages/scaffolding.mustache @@ -230,13 +230,21 @@

{{_i}}Fluid nesting{{/i}}

-

{{_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}}

+

{{_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}}

{{_i}}Fluid 12{{/i}}
{{_i}}Fluid 6{{/i}} +
+
+ {{_i}}Fluid 6{{/i}} +
+
+ {{_i}}Fluid 6{{/i}} +
+
{{_i}}Fluid 6{{/i}} @@ -249,7 +257,13 @@ <div class="span12"> {{_i}}Fluid 12{{/i}} <div class="row-fluid"> - <div class="span6">{{_i}}Fluid 6{{/i}}</div> + <div class="span6"> + {{_i}}Fluid 6{{/i}} + <div class="row-fluid"> + <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}}</div> </div> </div>