diff options
Diffstat (limited to 'vendor/twbs/bootstrap/scss/_grid.scss')
-rw-r--r-- | vendor/twbs/bootstrap/scss/_grid.scss | 43 |
1 files changed, 32 insertions, 11 deletions
diff --git a/vendor/twbs/bootstrap/scss/_grid.scss b/vendor/twbs/bootstrap/scss/_grid.scss index a22751537..0bfe5303b 100644 --- a/vendor/twbs/bootstrap/scss/_grid.scss +++ b/vendor/twbs/bootstrap/scss/_grid.scss @@ -3,26 +3,47 @@ // Set the container width, and override it for fixed navbars in media queries. @if $enable-grid-classes { - .container { + // Single container class with breakpoint max-widths + .container, + // 100% wide container at all breakpoints + .container-fluid { @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. + // Responsive containers that are 100% wide until a breakpoint + @each $breakpoint, $container-max-width in $container-max-widths { + .container-#{$breakpoint} { + @extend .container-fluid; + } -@if $enable-grid-classes { - .container-fluid { - @include make-container(); + @include media-breakpoint-up($breakpoint, $grid-breakpoints) { + %responsive-container-#{$breakpoint} { + max-width: $container-max-width; + } + + // Extend each breakpoint which is smaller or equal to the current breakpoint + $extend-breakpoint: true; + + @each $name, $width in $grid-breakpoints { + @if ($extend-breakpoint) { + .container#{breakpoint-infix($name, $grid-breakpoints)} { + @extend %responsive-container-#{$breakpoint}; + } + + // Once the current breakpoint is reached, stop extending + @if ($breakpoint == $name) { + $extend-breakpoint: false; + } + } + } + } } } + // Row // -// Rows contain and clear the floats of your columns. +// Rows contain your columns. @if $enable-grid-classes { .row { |