Fixes #5458: Clarify fluid nesting

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;
+}
 
 
 

docs/scaffolding.html

@@ -301,10 +301,13 @@
 </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
@@ -314,16 +317,27 @@
                     </div>
                   </div>
                 </div>
+                <div class="span6">
+                  Fluid 6
+                </div>
+              </div>
+            </div>
           </div>
 <pre class="prettyprint linenums">
 &lt;div class="row-fluid"&gt;
   &lt;div class="span12"&gt;
     Fluid 12
+    &lt;div class="row-fluid"&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;
 &lt;/div&gt;
 </pre>
 

docs/templates/pages/scaffolding.mustache

@@ -230,10 +230,13 @@
 </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}}
@@ -243,16 +246,27 @@
                     </div>
                   </div>
                 </div>
+                <div class="span6">
+                  {{_i}}Fluid 6{{/i}}
+                </div>
+              </div>
+            </div>
           </div>
 <pre class="prettyprint linenums">
 &lt;div class="row-fluid"&gt;
   &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 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;
 &lt;/div&gt;
 </pre>