用 Bootstrap 容器宽度计算 Sass

Question

我想在每个断点添加一个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.

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

Answer 1

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

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

Answer 2

$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 mixin 一起使用，为他的容器添加最大宽度 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 );
}

用 Bootstrap 容器宽度计算 Sass

Calculate with Bootstrap container width in Sass

css

bootstrap-4

sass

bootstrap-grid