如何使用其他尺寸扩展 Bootstrap 4.1 $spacers

Question

关于间距的Bootstrap 4.1 文档说我可以扩展 $spacers 变量（由边距和填充类使用），但它没有解释如何。

任何人都可以分享官方文档的链接吗？如果那不存在，谁能解释一下？

Answer 1

您可以按照 Bootstrap 的变量默认值文档了解如何仅覆盖单个 Sass 变量的默认值。您可以通过$spacers在覆盖文件中设置来添加自己的：

// Your variable overrides
$spacer: 1rem;
$spacers: (
  6: ($spacer * 3.5),
  7: ($spacer * 10)
)

// Bootstrap and its default variables
@import "../node_modules/bootstrap/scss/bootstrap";

文档引用的变量被调用$spacers并且在_variables.scss 中：

// Spacing
//
// Control the default styling of most Bootstrap elements by modifying these
// variables. Mostly focused on spacing.
// You can add more entries to the $spacers map, should you need more variation.

$spacer: 1rem !default;
$spacers: () !default;
// stylelint-disable-next-line scss/dollar-variable-default
$spacers: map-merge(
  (
    0: 0,
    1: ($spacer * .25),
    2: ($spacer * .5),
    3: $spacer,
    4: ($spacer * 1.5),
    5: ($spacer * 3)
  ),
  $spacers
);

Answer 2

您可以使用Sass来完成此操作，只需在编译 bootstrap 之前向 $spacers 变量添加另一个条目即可。所以像这样：

$spacers: (
  0: 0,
  1: ($spacer * .25),
  2: ($spacer * .5),
  3: $spacer,
  4: ($spacer * 1.5),
  5: ($spacer * 3),
  6: ($spacer * 5)
)

我希望它有帮助；）