Как расширить проставки Bootstrap 4.1 $ дополнительными размерами

Question

Документация Bootstrap 4.1 по интервалу говорит, что я могу расширить переменную $ spacers (которая используется классами margin и padding), но не объясняет, как.

Может кто-нибудь поделиться ссылкой на официальную документацию? Если этого не существует, может кто-нибудь объяснить?

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 , просто добавьте еще одну запись в переменную $ spacers перед компиляцией начальной загрузки. Так что-то вроде:

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

Надеюсь, это поможет;)