Sass 如何在引导中引用$container max widths

我目前正在使用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');

---

如果可能的话，有什么想法吗？

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

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

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

---

将以下内容导入引导文件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();
}

---

因此，它创建了一组新的宽度，覆盖引导宽度。

另一个似乎有效的选项，引导v.5，可能不是最佳的方法，因为使用@extend

.your-container {
  @include make-container();
  @extend .container;
}

这是可能的

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

---

我们怎么计算最大宽度？为什么576的最大宽度是540，992的最大宽度是940？数学是什么？是15px的填充物还是什么？进口订单在这里很重要！首先是函数，然后是变量。您不必传入引导混入。如果将引导覆盖设置为在实际导入引导网格之前，则上面的覆盖sass映射将替换引导变量文件中的“默认！”sass映射属性。新的最佳/最简单解决方案。