document grid column wrapping behavior; fixes #13247

diff --git a/docs/_includes/css/grid.html b/docs/_includes/css/grid.html
index 992612e857fce1d3073978ea744cf86342f66b5a..0deb12458671a9785d28f67c24a269b3ff017629 100644 (file)
--- a/docs/_includes/css/grid.html
+++ b/docs/_includes/css/grid.html
@@ -13,6 +13,7 @@
     <li>Columns create gutters (gaps between column content) via <code>padding</code>. That padding is offset in rows for the first and last column via negative margin on <code>.row</code>s.</li>
     <li>The negative margin is why the examples below are outdented. It's so that content within grid columns is lined up with non-grid content.</li>
     <li>Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three <code>.col-xs-4</code>.</li>
+    <li>If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.</li>
     <li>Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, applying any <code>.col-md-</code> class to an element will not only affect its styling on medium devices but also on large devices if a <code>.col-lg-</code> class is not present.</li>
   </ul>
   <p>Look to the examples for applying these principles to your code.</p>
@@ -252,6 +253,23 @@
   <div class="clearfix visible-xs-block"></div>
   <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
 </div>
+{% endhighlight %}
+
+  <h3 id="grid-example-wrapping">Example: Column wrapping</h3>
+  <p>If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.</p>
+  <div class="bs-docs-grid">
+    <div class="row show-grid">
+      <div class="col-xs-9">.col-xs-9</div>
+      <div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
+      <div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
+    </div>
+  </div>
+{% highlight html %}
+<div class="row">
+  <div class="col-xs-9">.col-xs-9</div>
+  <div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
+  <div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
+</div>
 {% endhighlight %}
 
   <h3 id="grid-responsive-resets">Responsive column resets</h3>

diff --git a/docs/_includes/nav/css.html b/docs/_includes/nav/css.html
index d67ad20be40a87438cd756ffc093eb6ca6294ab7..f2b1b54204dba1cb91d0aed6ee441ec151729d10 100644 (file)
--- a/docs/_includes/nav/css.html
+++ b/docs/_includes/nav/css.html
@@ -18,6 +18,7 @@
     <li><a href="#grid-example-fluid">Ex: Fluid container</a></li>
     <li><a href="#grid-example-mixed">Ex: Mobile and desktops</a></li>
     <li><a href="#grid-example-mixed-complete">Ex: Mobile, tablet, desktops</a></li>
+    <li><a href="#grid-example-wrapping">Ex: Column wrapping</a></li>
     <li><a href="#grid-responsive-resets">Responsive column resets</a></li>
     <li><a href="#grid-offsetting">Offsetting columns</a></li>
     <li><a href="#grid-nesting">Nesting columns</a></li>