From: Mark Otto <markdotto@gmail.com>
Date: Thu, 22 Dec 2016 05:38:02 +0000 (-0800)
Subject: fixes #18053 by removing container padding at lower breakpoints on responsive navbars
X-Git-Tag: v4.0.0-alpha.6~258
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=ecba56828d5724f587f135e9dd32471b607f82aa;p=thirdparty%2Fbootstrap.git

fixes #18053 by removing container padding at lower breakpoints on responsive navbars
---

diff --git a/docs/components/navbar.md b/docs/components/navbar.md
index 8a9e4c5738..2b0b837bed 100644
--- a/docs/components/navbar.md
+++ b/docs/components/navbar.md
@@ -367,14 +367,16 @@ Although it's not required, you can wrap a navbar in a `.container` to center it
 
 {% example html %}
 <div class="container">
-  <nav class="navbar navbar-light bg-faded">
+  <nav class="navbar navbar-light bg-faded navbar-toggleable-md">
     <a class="navbar-brand" href="#">Navbar</a>
   </nav>
 </div>
 {% endexample %}
 
+When the container is within your navbar, it's horizontal padding is removed at breakpoints lower than your specified `.navbar-toggleable-*` class. This ensures we're not doubling up on padding unnecessarily on lower viewports when your navbar is collapsed.
+
 {% example html %}
-<nav class="navbar navbar-light bg-faded">
+<nav class="navbar navbar-light bg-faded navbar-toggleable-md">
   <div class="container">
     <a class="navbar-brand" href="#">Navbar</a>
   </div>
diff --git a/scss/_navbar.scss b/scss/_navbar.scss
index a1cbf213e0..7a18c41f59 100644
--- a/scss/_navbar.scss
+++ b/scss/_navbar.scss
@@ -242,6 +242,11 @@
             float: none;
           }
         }
+
+        > .container {
+          padding-left: 0;
+          padding-right: 0;
+        }
       }
 
       @include media-breakpoint-up($next) {