rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-03-15 15:29:22 +01:00
Code Issues Actions Packages Releases Activity

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

Browse Source
This commit is contained in:
Mark Otto 2016-12-21 21:38:02 -08:00 committed by Mark Otto
parent 0677b6b18c
commit ecba56828d
2 changed files with 9 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
docs/components/navbar.md
View File

@ -367,14 +367,16 @@ Although it's not required, you can wrap a navbar in a `.container` to center it
{% example html %} {% example html %}
<div class="container"> <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> <a class="navbar-brand" href="#">Navbar</a>
</nav> </nav>
</div> </div>
{% endexample %} {% 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 %} {% example html %}
<nav class="navbar navbar-light bg-faded"> <nav class="navbar navbar-light bg-faded navbar-toggleable-md">
<div class="container"> <div class="container">
<a class="navbar-brand" href="#">Navbar</a> <a class="navbar-brand" href="#">Navbar</a>
</div> </div>

5
scss/_navbar.scss
View File

@ -242,6 +242,11 @@
float: none; float: none;
} }
} }
> .container {
padding-left: 0;
padding-right: 0;
}
} }
@include media-breakpoint-up($next) { @include media-breakpoint-up($next) {