在Bootstrap 4中使用容器宽度

Rvervuurt

我们最近已更改为Bootstrap 4，并且我正在研究设置宽度，断点等的所有新方法。

我想使div具有max-width当前断点的容器宽度，但是我找不到该特定宽度的标准SASS变量名称。

请注意，我无法.col-xl-为此使用类（例如），因为我无权访问HTML的这一特定部分。

tmg

看一下这个内置的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;
    }
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。