Question

Bootstrap 4.1 documentation on spacing说我可以扩展$ spacers变量（由margin和padding类使用），但是没有解释如何实现。

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

Answer 1

您可以按照Bootstrap的Variable defaults文档了解如何仅覆盖单个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 进行操作，只需在编译引导程序之前将另一个条目添加到$ spacers变量中即可。像这样：

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

希望对您有所帮助；）

如何使用其他大小扩展Bootstrap 4.1 $ spacer

2 个答案: