mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-17 11:00:56 +02:00
Code Issues Releases Wiki Activity

revamp the collapse behavior

Browse Source 
instead of flex column, use wrap and an explicit flexbox break with flex-basis 100% on the navbar-collapse.

add some additional container styles for enabling flex behavior when content isn't immediate child of .navbar
This commit is contained in:
Mark Otto
2017-03-20 21:23:11 -07:00
committed by Mark Otto
parent 0eb9862514
commit 09ba3de619
1 changed files with 20 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
scss/_navbar.scss
View File

@@ -18,11 +18,20 @@
.navbar { .navbar {
position: relative; position: relative;
display: flex; display: flex;
flex-direction: column; flex-wrap: wrap; // allow us to do the line break for collapsing content
justify-content: space-between; // space out brand from logo
padding: $navbar-padding-y $navbar-padding-x; padding: $navbar-padding-y $navbar-padding-x;
// Because flex properties aren't inherited, we need to redeclare these first
// few properities so that content nested within behave properly.
> .container,
> .container-fluid {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
@include media-breakpoint-down(nth(map-keys($grid-breakpoints), 1)) { @include media-breakpoint-down(nth(map-keys($grid-breakpoints), 1)) {
> .container { width: 100%; // prevent flex parent container(-fluid) from collapsing
margin-right: 0; margin-right: 0;
margin-left: 0; margin-left: 0;
} }
@@ -84,6 +93,13 @@
// Custom styles for responsive collapsing and toggling of navbar contents. // Custom styles for responsive collapsing and toggling of navbar contents.
// Powered by the collapse Bootstrap JavaScript plugin. // Powered by the collapse Bootstrap JavaScript plugin.
// When collapsed, prevent the toggleable navbar contents from appearing in
// the default flexbox row orienation. Requires the use of `flex-wrap: wrap`
// on the `.navbar` parent.
.navbar-collapse {
flex-basis: 100%;
}
// Button for toggling the navbar when in its collapsed state // Button for toggling the navbar when in its collapsed state
.navbar-toggler { .navbar-toggler {
align-self: flex-start; // Prevent toggler from growing to full width when it's the only visible navbar child align-self: flex-start; // Prevent toggler from growing to full width when it's the only visible navbar child
@@ -138,6 +154,7 @@
flex-direction: row; flex-direction: row;
flex-wrap: nowrap; flex-wrap: nowrap;
align-items: center; align-items: center;
justify-content: flex-start;
.navbar-nav { .navbar-nav {
flex-direction: row; flex-direction: row;
@@ -149,7 +166,6 @@
} }
// For nesting containers, have to redeclare for alignment purposes // For nesting containers, have to redeclare for alignment purposes
display: flex;
> .container, > .container,
> .container-fluid { > .container-fluid {
flex-wrap: nowrap; flex-wrap: nowrap;
@@ -159,7 +175,6 @@
// scss-lint:disable ImportantRule // scss-lint:disable ImportantRule
.navbar-collapse { .navbar-collapse {
display: flex !important; display: flex !important;
width: 100%;
} }
// scss-lint:enable ImportantRule // scss-lint:enable ImportantRule