diff options
| -rw-r--r-- | docs/components/navbar.md | 6 | ||||
| -rw-r--r-- | scss/_navbar.scss | 5 |
2 files changed, 9 insertions, 2 deletions
diff --git a/docs/components/navbar.md b/docs/components/navbar.md index 8a9e4c573..2b0b837be 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 a1cbf213e..7a18c41f5 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) { |