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

Posted 2023-03-21

【中文标题】在 Sass 中使用 Bootstrap 容器宽度计算

【英文标题】：Calculate with Bootstrap container width in Sass

【发布时间】：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。

【参考方案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 指令。我没有足够的信息来进一步帮助你，但希望这个提示会有所帮助。