diff options
| author | Mark Otto <[email protected]> | 2012-11-03 13:28:48 -0700 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2012-11-03 13:28:48 -0700 |
| commit | c9dbd2d60147b1a2f05fe08c72a0a28a90c73dc7 (patch) | |
| tree | ab227841f95e88a2095fd7ec7d676156cd3f1bd1 | |
| parent | 7ea343d57014555a3fd244b2308945d8c7684e18 (diff) | |
| download | bootstrap-c9dbd2d60147b1a2f05fe08c72a0a28a90c73dc7.tar.xz bootstrap-c9dbd2d60147b1a2f05fe08c72a0a28a90c73dc7.zip | |
Fixes #5458: Clarify fluid nesting
| -rw-r--r-- | docs/assets/css/docs.css | 6 | ||||
| -rw-r--r-- | docs/scaffolding.html | 18 | ||||
| -rw-r--r-- | docs/templates/pages/scaffolding.mustache | 18 |
3 files changed, 38 insertions, 4 deletions
diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 60782ecea..c08d529aa 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 ec548ace2..5261ea616 100644 --- a/docs/scaffolding.html +++ b/docs/scaffolding.html @@ -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 @@ <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 85ae5ea02..99bdb46f5 100644 --- a/docs/templates/pages/scaffolding.mustache +++ b/docs/templates/pages/scaffolding.mustache @@ -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 @@ <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> |