在bootstrap 4中轻松更改水平形式列对齐方式

我写了SCS来生成css中的所有不同类。您可以在自己的SCSS构建中随意加入。到目前为止似乎工作得非常好。

$meta-sizes: 'left', 'mid', 'right';

@mixin make-meta-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {
    // Common properties for all breakpoints
    %grid-column {
        position: relative;
        width: 100%;
        min-height: 1px; // Prevent columns from collapsing when empty
        padding-right: ($gutter / 2);
        padding-left: ($gutter / 2);
    }

    @each $breakpoint in map-keys($breakpoints) {

        $infix: $breakpoint;

        @each $meta-size in $meta-sizes {
            // Allow columns to stretch full width below their breakpoints
            @for $i from 1 through $columns {
                .col-#{$meta-size}-#{$infix}-#{$i} .col-#{$meta-size} {
                    @extend %grid-column;
                    @include make-col($i, $columns);
                }
            }
        }
    }
}

@include make-meta-grid-columns();