在Bootstrap 4中使用容器宽度

Question

我们最近更改为Bootstrap 4,我正在研究设置宽度,断点等所有新方法.

我想让div有一个max-width当前断点的容器宽度,但我找不到该特定宽度的标准SASS变量名.

请注意,我不能使用类(例如.col-xl-),因为我无法访问HTML的这个特定部分.

Answer 1

看看这个内置的mixin:

// For each breakpoint, define the maximum width of the container in a media query
@mixin make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) {
    @each $breakpoint, $container-max-width in $max-widths {
        @include media-breakpoint-up($breakpoint, $breakpoints) {
            width: $container-max-width;
            max-width: 100%;
        }
    }
}

您可以根据需要创建类似的:

@mixin make-max-widths-container-width($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) {
    @each $breakpoint, $container-max-width in $max-widths {
        @include media-breakpoint-up($breakpoint, $breakpoints) {
            max-width: $container-max-width;
        }
    }
}

并使用它:

.my-custom-class{
   @include make-max-widths-container-width();
}

生成"编译"的CSS(断点和容器宽度的默认值):

@media (min-width: 576px) {
    .my-custom-class {
        max-width: 540px;
    }
}

@media (min-width: 768px) {
    .my-custom-class {
        max-width: 720px;
    }
}

@media (min-width: 992px) {
    .my-custom-class {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {
    .my-custom-class {
        max-width: 1140px;
    }
}