only negative indent nested grid rows; add new grid example

docs/assets/css/bootstrap.css

@@ -757,31 +757,31 @@ pre code {
   clear: both;
 }
 
-.row {
+.row:before,
+.row:after {
+  display: table;
+  content: " ";
+}
+
+.row:after {
+  clear: both;
+}
+
+.row:before,
+.row:after {
+  display: table;
+  content: " ";
+}
+
+.row:after {
+  clear: both;
+}
+
+.row .row {
   margin-right: -15px;
   margin-left: -15px;
 }
 
-.row:before,
-.row:after {
-  display: table;
-  content: " ";
-}
-
-.row:after {
-  clear: both;
-}
-
-.row:before,
-.row:after {
-  display: table;
-  content: " ";
-}
-
-.row:after {
-  clear: both;
-}
-
 [class*="col-span-"] {
   position: relative;
   min-height: 1px;

docs/examples/grid.html

@@ -0,0 +1,56 @@
+---
+layout: example
+title: Grid template
+---
+
+<!-- Custom styles for this template -->
+<style>
+
+  .container {
+    padding-left: 15px;
+    padding-right: 15px;
+  }
+
+  .row {
+    margin-bottom: 20px;
+    margin-left: -15px;
+    margin-right: -15px;
+  }
+  [class*="col-span-"] {
+    padding-top: 15px;
+    padding-bottom: 15px;
+    background-color: #f5f5f5;
+    border: 1px solid #e5e5e5;
+  }
+</style>
+
+
+<div class="container">
+
+  <h2>Bootstrap grids</h2>
+  <p class="lead">Basic grid layouts to get you familiar with building within the Bootstrap grid system.</p>
+
+  <h4>Three equal columns</h4>
+  <div class="row">
+    <div class="col-span-4">.col-span-4</div>
+    <div class="col-span-4">.col-span-4</div>
+    <div class="col-span-4">.col-span-4</div>
+  </div>
+
+  <h4>Three unequal columns</h4>
+  <div class="row">
+    <div class="col-span-3">.col-span-3</div>
+    <div class="col-span-6">.col-span-6</div>
+    <div class="col-span-3">.col-span-3</div>
+  </div>
+
+  <h4>Two columns</h4>
+  <div class="row">
+    <div class="col-span-8">.col-span-8</div>
+    <div class="col-span-4">.col-span-4</div>
+  </div>
+
+  <h4>Full width, single column</h4>
+  <p class="text-muted">No grid classes are necessary for full-width elements.</p>
+
+</div> <!-- /container -->

less/mixins.less

@@ -407,11 +407,14 @@
 
 // Creates a wrapper for a series of columns
 .make-row() {
-  // Negative margin the row out to align the content of columns
-  margin-left:  (@grid-gutter-width / -2);
-  margin-right: (@grid-gutter-width / -2);
   // Then clear the floated columns
   .clearfix();
+
+  // Negative margin nested rows out to align the content of columns
+  .row {
+    margin-left:  (@grid-gutter-width / -2);
+    margin-right: (@grid-gutter-width / -2);
+  }
 }
 // Generate the columns
 .make-column(@columns) {