Question

我正在尝试通过使用sass预定义变量来覆盖左右的btn-lg填充，但是找不到该变量。我只能找到

.btn-lg {
  @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-line-height-lg, $btn-border-radius-lg);
}

如何通过覆盖自定义SCSS文件中的sass变量来更改引导程序4中btn-lg的左/右填充？

Answer 1

您可以在 _variables.scss 文件中找到Bootstrap的变量默认值。用于.btn-lg的默认变量是：

$btn-padding-y-lg:            $input-btn-padding-y-lg !default;
$btn-padding-x-lg:            $input-btn-padding-x-lg !default;
$btn-font-size-lg:            $input-btn-font-size-lg !default;
$btn-line-height-lg:          $input-btn-line-height-lg !default;

$input-btn-padding-y-lg:      .5rem !default;
$input-btn-padding-x-lg:      1rem !default;

要更改.btn-lg的填充，您需要覆盖 custom.scss 文件中的$input-btn-padding-y-lg和$input-btn-padding-x-lg的默认值。请记住，您的覆盖必须在导入导入Bootstrap的Sass文件之前。

例如，为了减少.btn-lg的填充，我将其放在我的 custom.scss 文件中：

// Variable overrides
$input-btn-padding-y-lg:      0.2rem;
$input-btn-padding-x-lg:      0.5rem;

// Import Bootstrap and its defaults
@import "../bootstrap/scss/bootstrap"

更改按钮填充覆盖Sass变量

1 个答案: