mirror of
https://github.com/twbs/bootstrap.git
synced 2025-08-22 21:22:52 +02:00
Inherit flex-wrap to decrease generated css (#29951)
This commit is contained in:
committed by
XhmikosR
parent
5d1da6377d
commit
6904afe36b
@@ -27,15 +27,16 @@
|
|||||||
|
|
||||||
// Because flex properties aren't inherited, we need to redeclare these first
|
// Because flex properties aren't inherited, we need to redeclare these first
|
||||||
// few properties so that content nested within behave properly.
|
// few properties so that content nested within behave properly.
|
||||||
|
// The `flex-wrap` property is inherited to simplify the expanded navbars
|
||||||
%container-flex-properties {
|
%container-flex-properties {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: inherit;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
|
|
||||||
.container,
|
> .container,
|
||||||
.container-fluid {
|
> .container-fluid {
|
||||||
@extend %container-flex-properties;
|
@extend %container-flex-properties;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -148,7 +149,7 @@
|
|||||||
|
|
||||||
&#{$infix} {
|
&#{$infix} {
|
||||||
@include media-breakpoint-up($next) {
|
@include media-breakpoint-up($next) {
|
||||||
flex-flow: row nowrap;
|
flex-wrap: nowrap;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
|
|
||||||
.navbar-nav {
|
.navbar-nav {
|
||||||
@@ -164,22 +165,6 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// For nesting containers, have to redeclare for alignment purposes
|
|
||||||
%container-nesting-#{$breakpoint} {
|
|
||||||
flex-wrap: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
> .container,
|
|
||||||
> .container-fluid {
|
|
||||||
@extend %container-nesting-#{$breakpoint};
|
|
||||||
}
|
|
||||||
|
|
||||||
@each $size, $container-max-width in $container-max-widths {
|
|
||||||
> .container#{breakpoint-infix($size, $container-max-widths)} {
|
|
||||||
@extend %container-nesting-#{$breakpoint};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar-collapse {
|
.navbar-collapse {
|
||||||
display: flex !important; // stylelint-disable-line declaration-no-important
|
display: flex !important; // stylelint-disable-line declaration-no-important
|
||||||
|
|
||||||
|
Reference in New Issue
Block a user