将 form-control 设置为与 bootstrap 4 中的 form-control-sm 相同的大小答案

【问题标题】：Set form-control to the same size as form-control-sm in boostrap 4将 form-control 设置为与 bootstrap 4 中的 form-control-sm 相同的大小
【发布时间】：2019-10-18 00:52:48
【问题描述】：

我想覆盖引导程序，以便 form-control 与 form-control-sm 大小相同。

我有一个 bootstrap-custom.scss 文件，并在 _forms.scss 中找到以下内容

.form-control {
  display: block;
  width: 100%;
  height: $input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
  padding: $padding-base-vertical $padding-base-horizontal;
  font-size: $font-size-base;
  line-height: $line-height-base;

我尝试添加以下内容，但没有成功：

$padding-base-vertical:     5px !default;
$padding-base-horizontal:   10px !default;

【问题讨论】：

在不重建 Bootstrap 4 的情况下覆盖默认值，应该只是在引导 css 之后加载覆盖 css 文件并在适用于覆盖样式时使用 !important
您使用的是 Bootstrap 4 吗？您引用的 _forms.scss 是 3.x 的旧版本
@Zim 是的，我正在使用 4，所以这可能解释了我的部分问题 - 谢谢

标签： sass bootstrap-4

【解决方案1】：

从 Bootstrap 4 中设置适当的 SASS 变量...

@import "bootstrap/functions";
@import "bootstrap/variables";

$input-padding-y: $input-padding-y-sm;
$input-padding-x: $input-padding-x-sm;
$input-height: $input-height-sm;
$input-font-size: $input-font-size-sm;

@import "bootstrap";

https://www.codeply.com/go/mHAz7ecNiy

【讨论】：