only negative indent nested grid rows; add new grid example

3 files changed, 67 insertions, 8 deletions

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 76b5ec31d..7f498b0c5 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -757,11 +757,6 @@ pre code {
   clear: both;
 }
 
-.row {
-  margin-right: -15px;
-  margin-left: -15px;
-}
-
 .row:before,
 .row:after {
   display: table;
@@ -782,6 +777,11 @@ pre code {
   clear: both;
 }
 
+.row .row {
+  margin-right: -15px;
+  margin-left: -15px;
+}
+
 [class*="col-span-"] {
   position: relative;
   min-height: 1px;
diff --git a/docs/examples/grid.html b/docs/examples/grid.html
new file mode 100644
index 000000000..f2028b8bf
--- /dev/null
+++ b/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 -->
diff --git a/less/mixins.less b/less/mixins.less
index b44197bcc..3f25b1b73 100644
--- a/less/mixins.less
+++ b/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) {