css - 在 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;
    }
}