Commit 102bb8e6 authored by Mark Otto's avatar Mark Otto
Browse files

clear up some messaging in docs on fluid grid system and nesting overall

parent 2679c3eb
Showing with 34 additions and 2 deletions
+34 -2
No preview for this file type
...@@ -173,7 +173,8 @@ ...@@ -173,7 +173,8 @@
<div class="row"> <div class="row">
<div class="span6"> <div class="span6">
<p>With the static (non-fluid) grid system in Bootstrap, nesting is easy. To nest your content, just add a new <code>.row</code> and set of <code>.span*</code> columns within an existing <code>.span*</code> column.</p> <p>With the static (non-fluid) grid system in Bootstrap, nesting is easy. To nest your content, just add a new <code>.row</code> and set of <code>.span*</code> columns within an existing <code>.span*</code> column.</p>
<h4>Example</h4> <h3>Example</h3>
<p>Nested rows should include a set of columns that add up to the number of columns of it's parent. For example, two nested <code>.span3</code> columns should be placed within a <code>.span6</code>.</p>
<div class="row show-grid"> <div class="row show-grid">
<div class="span6"> <div class="span6">
Level 1 of column Level 1 of column
...@@ -187,6 +188,21 @@ ...@@ -187,6 +188,21 @@
</div> </div>
</div> </div>
</div> </div>
<h3>Fluid example</h3>
<p>Nesting with fluid grids is a bit different: the number of nested columns doesn't need to match the parent. Instead, your columns are reset at each level because each row takes up 100% of the parent column.</p>
<div class="row-fluid show-grid">
<div class="span12">
Fluid 12
<div class="row-fluid show-grid">
<div class="span6">
Fluid 6
</div>
<div class="span6">
Fluid 6
</div>
</div>
</div>
</div>
</div> </div>
<div class="span6"> <div class="span6">
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
......
...@@ -97,7 +97,8 @@ ...@@ -97,7 +97,8 @@
<div class="row"> <div class="row">
<div class="span6"> <div class="span6">
<p>{{_i}}With the static (non-fluid) grid system in Bootstrap, nesting is easy. To nest your content, just add a new <code>.row</code> and set of <code>.span*</code> columns within an existing <code>.span*</code> column.{{/i}}</p> <p>{{_i}}With the static (non-fluid) grid system in Bootstrap, nesting is easy. To nest your content, just add a new <code>.row</code> and set of <code>.span*</code> columns within an existing <code>.span*</code> column.{{/i}}</p>
<h4>{{_i}}Example{{/i}}</h4> <h3>{{_i}}Example{{/i}}</h3>
<p>{{_i}}Nested rows should include a set of columns that add up to the number of columns of it's parent. For example, two nested <code>.span3</code> columns should be placed within a <code>.span6</code>.{{/i}}</p>
<div class="row show-grid"> <div class="row show-grid">
<div class="span6"> <div class="span6">
{{_i}}Level 1 of column{{/i}} {{_i}}Level 1 of column{{/i}}
...@@ -111,6 +112,21 @@ ...@@ -111,6 +112,21 @@
</div> </div>
</div> </div>
</div> </div>
<h3>{{_i}}Fluid example{{/i}}</h3>
<p>{{_i}}Nesting with fluid grids is a bit different: the number of nested columns doesn't need to match the parent. Instead, your columns are reset at each level because each row takes up 100% of the parent column.{{/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>
<div class="span6">
{{_i}}Fluid 6{{/i}}
</div>
</div>
</div>
</div>
</div> </div>
<div class="span6"> <div class="span6">
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment