Bootstrapの余白

Question

Bootstrapの余白は{property}{sides}-{breakpoint}-{size}で構成されていますが、サイズが0～5でもっと余白が欲しい場合はCSSに直書きするしかないでしょうか？
できれば6以降も作れたらなと思っているのですが設定項目が見当たりません。
CSSに書くより面倒であれば諦めます…

Answer 1

scssファイルも提供されているため、追加することは可能です。

https://getbootstrap.com/docs/4.1/utilities/spacing/#notation

(You can add more sizes by adding entries to the $spacers Sass map variable.)

($spacers Sassマップ変数にエントリを追加することで、さらにサイズを加えられます。)

_variables-custom.scss で6を追加する例。

$spacers: map-merge(
  (
    6: ($spacer * 5)
  ),
  $spacers
);

Comments

[misonya]

理想通りにできました！ありがとうございます！