diff options
| author | Mark Otto <[email protected]> | 2016-12-21 21:38:02 -0800 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2016-12-22 13:48:07 -0800 |
| commit | ecba56828d5724f587f135e9dd32471b607f82aa (patch) | |
| tree | 3694f907c2882e70ae55ed93f3bfcc102d05bfc1 | |
| parent | 0677b6b18c87068ce025f93f8a86998f1d3ed264 (diff) | |
| download | bootstrap-ecba56828d5724f587f135e9dd32471b607f82aa.tar.xz bootstrap-ecba56828d5724f587f135e9dd32471b607f82aa.zip | |
fixes #18053 by removing container padding at lower breakpoints on responsive navbars
| -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) { |