在 Sass 中使用 Bootstrap 容器宽度计算答案

【问题标题】：Calculate with Bootstrap container width in Sass在 Sass 中使用 Bootstrap 容器宽度计算
【发布时间】：2021-12-10 17:22:50
【问题描述】：

我想为每个断点添加一个 50% 的容器。

例如：.container的witdh在xl断点处为1140px。所以我想做这样的事情：

.is-style-container-50 {
    max-width: calc($container-max-widths / 2);
}

我在文档中找到了变量 $container-max-widths。里面有这样的断点：

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px
);

问题是，我收到如下错误消息：

Error: (sm: 540px, md: 720px, lg: 960px, xl: 1140px) isn't a valid CSS value.

还有其他方法可以使用容器宽度进行计算吗？还是我必须使用固定值？

【问题讨论】：

为什么不直接使用 .col-6 来获得 50% 的列？
50% 只是一个例子。我需要更多，但我周围没有.row。

标签： css bootstrap-4 sass bootstrap-grid

【解决方案1】：

$container-max-widths 是映射到键的值列表 (sm,md,lg,xl)。您需要从$container-max-widths 的xl 键中获取一个值。

xl 的例子你需要这个：

.is-style-container-50 {
    max-width: map-get($container-max-widths , xl) / 2;
}

要使用所有断点，您需要循环遍历所有列表：

@each $size-name in map-keys($container-max-widths){
    $size-value: map-get($container-max-widths , $size-name);
    .is-style-container-50 {
        @include media-breakpoint-up($size-name){
            max-width: $size-value / 2;
        }
    }
}

您还可以使用 50% 的值构建另一个列表，并将其与 Bootstrap 混合使用以将最大宽度添加到他的容器make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints)：

$container-mid-max-widths: (
  sm: #{map-get($container-max-widths, sm)*0.5},
  md: #{map-get($container-max-widths, md)*0.5},
  lg: #{map-get($container-max-widths, lg)*0.5},
  xl: #{map-get($container-max-widths, xl)*0.5}
);

.mid-container {
    // Using Bootstrap Mixin: make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints)
    @include make-container-max-widths( $container-mid-max-widths , $grid-breakpoints );
}

【讨论】：

【解决方案2】：

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px
);

这是一个 SASS 映射 (https://sass-lang.com/documentation/values/maps)，而不是 CSS 指令。我没有足够的信息来进一步帮助你，但希望这个提示会有所帮助。

【讨论】：