diff options
Diffstat (limited to 'scss')
| -rw-r--r-- | scss/_grid.scss | 23 | ||||
| -rw-r--r-- | scss/_navbar.scss | 9 |
2 files changed, 19 insertions, 13 deletions
diff --git a/scss/_grid.scss b/scss/_grid.scss index a227515379..f70e849517 100644 --- a/scss/_grid.scss +++ b/scss/_grid.scss @@ -3,23 +3,32 @@ // Set the container width, and override it for fixed navbars in media queries. @if $enable-grid-classes { + // Single container class with breakpoint max-widths .container { @include make-container(); @include make-container-max-widths(); } -} - -// Fluid container -// -// Utilizes the mixin meant for fixed width containers, but with 100% width for -// fluid, full width layouts. -@if $enable-grid-classes { + // 100% wide container at all breakpoints .container-fluid { @include make-container(); } + + // Responsive containers that are 100% wide until a breakpoint + @each $breakpoint, $container-max-width in $container-max-widths { + .container-#{$breakpoint} { + @include make-container(); + } + + @include media-breakpoint-up($breakpoint, $grid-breakpoints) { + .container-#{$breakpoint} { + max-width: $container-max-width; + } + } + } } + // Row // // Rows contain and clear the floats of your columns. diff --git a/scss/_navbar.scss b/scss/_navbar.scss index 2b57ae53ac..beb6f2bf00 100644 --- a/scss/_navbar.scss +++ b/scss/_navbar.scss @@ -25,8 +25,7 @@ // Because flex properties aren't inherited, we need to redeclare these first // few properties so that content nested within behave properly. - > .container, - > .container-fluid { + > [class^="container"] { display: flex; flex-wrap: wrap; align-items: center; @@ -140,8 +139,7 @@ &#{$infix} { @include media-breakpoint-down($breakpoint) { - > .container, - > .container-fluid { + > [class^=".container"] { padding-right: 0; padding-left: 0; } @@ -165,8 +163,7 @@ } // For nesting containers, have to redeclare for alignment purposes - > .container, - > .container-fluid { + > [class^=".container"] { flex-wrap: nowrap; } |