如何在Bootstrap API中增加按钮行高？附SCSS代码寻求解决方案

当然可以，Bootstrap的SCSS变量系统就是为这类自定义场景设计的，你当前尝试修改$input-btn-line-height变量的方向完全正确，以下是具体的验证和优化建议：

1. 变量覆盖的正确性 #

你已经在导入bootstrap.scss之前定义了$input-btn-line-height: 3;，这是正确的操作——Bootstrap的核心变量都带有!default声明，只有在变量未被提前定义时才会使用默认值，所以这个时机的变量覆盖是有效的。

2. 确认生效的检查点 #

如果修改后按钮行高没变化，排查以下几点：

• 确保你的SCSS编译流程正确识别了变量覆盖顺序，没有在导入Bootstrap核心后重新定义该变量
• 检查是否有自定义CSS规则优先级高于Bootstrap的按钮样式，覆盖了行高属性

3. 进阶自定义方案 #

如果需要更精准的按钮高度控制，除了行高，还可以配合调整按钮上下内边距变量：

// 同时调整行高和上下内边距，实现更协调的按钮高度
$input-btn-line-height: 3;
$input-btn-padding-y: 0.75rem;

也可以针对特定按钮创建自定义类，避免全局修改影响所有按钮：

.btn-increased-height {
  line-height: 3;
  padding-block: 0.75rem; // 等效于padding-top + padding-bottom
}

关于你代码中的自定义工具类 #

你定义的margin-top-and-bottom工具类存在逻辑不一致的问题：property设置为margin-bottom，但类名是mb，描述的是上下margin。如果要实现同时控制上下margin的工具类，建议修改为：

$utilities: (
    "margin-y": (
        property: margin-top margin-bottom,
        class: my,
        values: (
            "03": 0.3rem,
        ),
    ),
);

这样生成的.my-03类会同时设置上下margin，命名和功能更匹配。

内容的提问来源于stack exchange，提问作者Joel Jabez