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 8a9e4c5738f69af37e6e4a515243bc05e2533417..2b0b837bede2d83acdefaea2d3d8bc3d1c274ab6 100644 (file)
--- 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 a1cbf213e0e0526b08f44ca131698698dfb26a33..7a18c41f59e46db29f5c5920376146e25b8c7c6c 100644 (file)
--- 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) {