scss Bootstrap 4 Mixins网格

Posted 2021-05-17

// Example usage
.some-class {
    @include media-breakpoint-up(sm) {
        // Larger than sm: 480px
        display: inline;
    }
    @include media-breakpoint-down(md) {
        // Smaller than md: 768px
        display: block;
    }
}

/* -------------------------------------------------------------------------- */

// Grid system
// @see https://getbootstrap.com/docs/4.0/layout/grid/#sass-mixins
// Generate semantic grid columns with these mixins.
@include make-container();
// For each breakpoint, define the maximum width of the container in a media query
@include make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints);
// Creates a wrapper for a series of columns
@include make-row();
// Make the element grid-ready (applying everything but the width)
@include make-col-ready();
@include make-col($size, $columns: $grid-columns);

// Example usage
/*
<div class="example-container">
  <div class="example-row">
    <div class="example-content-main">Main content</div>
    <div class="example-content-secondary">Secondary content</div>
  </div>
</div>
*/
.example-container {
    width: 800px;
    @include make-container();
}
.example-row {
    @include make-row();
}
.example-content-main {
    @include make-col-ready();

    @include media-breakpoint-up(sm) {
        @include make-col(6);
    }
    @include media-breakpoint-up(lg) {
        @include make-col(8);
    }
}
.example-content-secondary {
    @include make-col-ready();

    @include media-breakpoint-up(sm) {
        @include make-col(6);
    }
    @include media-breakpoint-up(lg) {
        @include make-col(4);
    }
}