如何在Bootstrap中引用$ container-max-widths

Question

我目前正在使用Bootstrap 4，并且对断点进行了一些更改-看起来像这样：

$container-max-widths: (
    xs: 540px,
    sm: 700px,
    md: 960px,
    lg: 1140px,
    xl: 1300px,
    g: 1560px,
    xg: 1920px
) !default;

这是我的问题：如何引用$ container-max- widths- > g从中获取1560px？

我想做这样的事情，但是不起作用：

max-width: $grid-breakpoints('g');

有什么想法吗？

Answer 1

这是可能的。

max-width: map-get($container-max-widths, "g");

Answer 2

将以下内容导入您的引导文件 css/scss 文件夹

• scss/_functions.scss
• scss/_variables.scss
• scss/mixins/_breakpoints.scss

然后将新的断点和容器宽度添加到您的 scss 文件中

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px
);
$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 940px,
  xl: 1000px
);
@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;
    }
  }
}
.container{
   @include make-max-widths-container-width();
}

所以它创建了一组新的宽度来覆盖引导宽度。

Answer 3

您可以创建一个函数来检索断点值，如下所示：

@function get-breakpoints($key: "md") {
    @return map-get($container-max-widths, $key);
}

.test-class {
    max-width: get-breakpoints("g");
}