sass - 如何在 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

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

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

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