From: Mark Otto <markdotto@gmail.com>
Date: Mon, 3 Jul 2017 16:18:28 +0000 (-0700)
Subject: add .row-no-gutters class
X-Git-Tag: v3.4.0~48^2~35
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=48f1482306b8b81cf1588afcb2fdcd788e0db950;p=thirdparty%2Fbootstrap.git

add .row-no-gutters class

fixes #15180, fixes #19107, fixes #9102, fixes #7368
---

diff --git a/docs/_includes/css/grid.html b/docs/_includes/css/grid.html
index 46ed466275..509b4cec57 100644
--- a/docs/_includes/css/grid.html
+++ b/docs/_includes/css/grid.html
@@ -306,6 +306,38 @@
 {% endhighlight %}
 
 
+  <h2 id="grid-remove-gutters">Remove gutters</h2>
+  <p>Remove the gutters from a row and it's columns with the <code>.row-no-gutters</code> class.</p>
+  <div class="row row-no-gutters show-grid">
+    <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
+    <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
+  </div>
+  <div class="row row-no-gutters show-grid">
+    <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
+    <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
+    <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
+  </div>
+  <div class="row row-no-gutters show-grid">
+    <div class="col-xs-6">.col-xs-6</div>
+    <div class="col-xs-6">.col-xs-6</div>
+  </div>
+{% highlight html %}
+<div class="row row-no-gutters">
+  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
+  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
+</div>
+<div class="row row-no-gutters">
+  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
+  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
+  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
+</div>
+<div class="row row-no-gutters">
+  <div class="col-xs-6">.col-xs-6</div>
+  <div class="col-xs-6">.col-xs-6</div>
+</div>
+{% endhighlight %}
+
+
   <h2 id="grid-offsetting">Offsetting columns</h2>
   <p>Move columns to the right using <code>.col-md-offset-*</code> classes. These classes increase the left margin of a column by <code>*</code> columns. For example, <code>.col-md-offset-4</code> moves <code>.col-md-4</code> over four columns.</p>
   <div class="row show-grid">
diff --git a/docs/_includes/nav/css.html b/docs/_includes/nav/css.html
index 59134bdfcf..72dc82d888 100644
--- a/docs/_includes/nav/css.html
+++ b/docs/_includes/nav/css.html
@@ -20,6 +20,7 @@
     <li><a href="#grid-example-mixed-complete">Ex: Mobile, tablet, desktop</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-remove-gutters">Remove gutters</a></li>
     <li><a href="#grid-offsetting">Offsetting columns</a></li>
     <li><a href="#grid-nesting">Nesting columns</a></li>
     <li><a href="#grid-column-ordering">Column ordering</a></li>
diff --git a/less/grid.less b/less/grid.less
index e100655b70..e94d659487 100644
--- a/less/grid.less
+++ b/less/grid.less
@@ -40,6 +40,16 @@
   .make-row();
 }
 
+.row-no-gutters {
+  margin-right: 0;
+  margin-left: 0;
+
+  [class*="col-"] {
+    padding-left: 0;
+    padding-right: 0;
+  }
+}
+
 
 // Columns
 //