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();
}

＆＃34;编译＆＃34;生成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;
    }
}

在Bootstrap 4中使用容器宽度

1 个答案: