如何在 Bootstrap 中引用 $container-max-widths

Posted 2023-03-06

【中文标题】如何在 Bootstrap 中引用 $container-max-widths

【英文标题】：How to refer to $container-max-widths in Bootstrap

【发布时间】：2018-05-08 11:50:27

【问题描述】：

我目前正在使用 Bootstrap 4，并且对断点进行了一些更改 - 看起来像这样：

$container-max-widths: (
    xs: 540px,
    sm: 700px,
    md: 960px,
    lg: 1140px,
    xl: 1300px,
    g: 1560px,
    xg: 1920px
) !default;

这是我的问题：我如何参考 $container-max-widths -> g 来获得 1560 像素？

我想做这样的事情，但它不起作用：

max-width: $grid-breakpoints('g');

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

【参考方案1】：

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

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


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

【讨论】：

新的 bettee 解决方案是使用内置的 map-get 函数而不是自己编写

【参考方案2】：

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

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

【讨论】：

我们如何计算最大宽度？为什么 576 的最大宽度为 540，或 992 的最大宽度为 940？数学是什么？是 15px 的填充还是什么？

进口订单在这里很重要！首先是函数，然后是 vars。

你不应该传入 bootstrap mixin。如果您将 boostrap 覆盖设置在实际导入 bootstra-grid 之前，那么上面的覆盖 sass-map 将替换“默认！”引导变量文件中的 sass-map 属性。

【参考方案3】：

另一个似乎有效的选项，Bootstrap v.5，可能不是使用@extend 后的最佳方式

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

【参考方案4】：

这是可能的。

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

【讨论】：

新的最佳/最简单的解决方案。

同意并赞成这一点，因为不需要编写自己的函数，map-get 是内置在 sass 中的