1
0
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:
Martijn Cuppens
2020-01-07 21:32:46 +01:00
committed by XhmikosR
parent 5d1da6377d
commit 6904afe36b

View File

@@ -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