rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-01 13:24:25 +01:00
Code Issues Actions Packages Releases Activity

css: .navbar child's aligning

Browse Source 
Vertical centering `.navbar` flex children's

Demo: http://jsbin.com/fibini
This commit is contained in:
Catalin Zalog 2017-04-08 13:57:45 +03:00 committed by Mark Otto
parent 8423e5c3e6
commit 758503e9ae
1 changed files with 2 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
scss/_navbar.scss
View File

@ -19,6 +19,7 @@
position: relative; position: relative;
display: flex; display: flex;
flex-wrap: wrap; // allow us to do the line break for collapsing content flex-wrap: wrap; // allow us to do the line break for collapsing content
align-items: center;
justify-content: space-between; // space out brand from logo justify-content: space-between; // space out brand from logo
padding: $navbar-padding-y $navbar-padding-x; padding: $navbar-padding-y $navbar-padding-x;
@ -28,6 +29,7 @@
> .container-fluid { > .container-fluid {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
align-items: center;
justify-content: space-between; justify-content: space-between;
@include media-breakpoint-down(nth(map-keys($grid-breakpoints), 1)) { @include media-breakpoint-down(nth(map-keys($grid-breakpoints), 1)) {
@ -45,7 +47,6 @@
.navbar-brand { .navbar-brand {
display: inline-block; display: inline-block;
align-self: flex-start;
padding-top: $navbar-brand-padding-y; padding-top: $navbar-brand-padding-y;
padding-bottom: $navbar-brand-padding-y; padding-bottom: $navbar-brand-padding-y;
margin-right: $navbar-padding-x; margin-right: $navbar-padding-x;
@ -102,7 +103,6 @@
// 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
padding: $navbar-toggler-padding-y $navbar-toggler-padding-x; padding: $navbar-toggler-padding-y $navbar-toggler-padding-x;
font-size: $navbar-toggler-font-size; font-size: $navbar-toggler-font-size;
line-height: 1; line-height: 1;
@ -153,7 +153,6 @@
@include media-breakpoint-up($next) { @include media-breakpoint-up($next) {
flex-direction: row; flex-direction: row;
flex-wrap: nowrap; flex-wrap: nowrap;
align-items: center;
justify-content: flex-start; justify-content: flex-start;
.navbar-nav { .navbar-nav {
@ -173,7 +172,6 @@
> .container, > .container,
> .container-fluid { > .container-fluid {
flex-wrap: nowrap; flex-wrap: nowrap;
align-items: center;
} }
// scss-lint:disable ImportantRule // scss-lint:disable ImportantRule