改$btn-padding-y变量最可靠，因其作为基准值自动影响所有尺寸和状态的按钮内边距，避免css覆盖遗漏导致的高度不一致。
直接改 $btn-padding-y 变量是最干净的修改方式，但只在你用 Sass 编译 Bootstrap 时才真正生效；CDN 引入项目硬写 CSS 覆盖，反而容易漏掉状态和尺寸变体。
为什么改 $btn-padding-y 比写 .btn { padding: ... } 更可靠
Bootstrap 5 的按钮 padding 不是写死的像素值，而是由多个变量组合生成：$btn-padding-y 控制中等尺寸的上下内边距，$btn-padding-y-sm 和 $btn-padding-y-lg 分别基于它按比例缩放。你只改一个 CSS 规则，.btn-sm 和 .btn-lg 依然走原逻辑，结果就是三种尺寸按钮高度不一致。
-
$btn-padding-y是基准，$btn-padding-y-sm: $btn-padding-y * 0.75这类计算式在编译时展开，最终产出所有尺寸的完整规则 - 改变量后，
:hover、:disabled、.btn-outline-*等状态自动继承新 padding，不用额外覆盖 - 若用纯 CSS 写
.btn { padding: 0.5rem 1rem; }，必须同步补上.btn-sm、.btn-lg、.btn-outline-primary:hover等至少 12 种组合，否则上线后某处按钮突然“矮一截”
如何正确覆盖 $btn-padding-y 变量
顺序比内容更重要：变量必须在 @import "bootstrap/scss/functions" 之后、@import "bootstrap/scss/bootstrap" 之前定义，否则会被重置。
- 新建
_custom-variables.scss，放在 Bootstrap 源码导入前： -
$btn-padding-y: 0.625rem;（即 10px） -
$btn-padding-x: 1.25rem;（即 20px） - 确保你没漏掉其他依赖项：
$btn-font-size和$btn-line-height若未同步微调，文字可能在新 padding 下垂直偏移 - 重新运行 Sass 编译命令（如
sass src/main.scss dist/main.css），不要跳过这步——CDN 项目无法触发该流程
改完后必须验证的三个边界场景
变量生效不等于视觉正确。padding 变动会牵扯布局节奏，尤其在复合容器里。
- 嵌套在
.btn-group中时：检查边框是否仍合并（margin-right: -1px依赖原始 padding 尺寸对齐，改大后可能出现 1px 白缝） - 配合
.btn-block或col-12使用时：增大 padding 后按钮宽度可能超父容器，需确认box-sizing: border-box是否被意外覆盖 - 在
.modal-footer或弹窗内使用时：小屏下.btn-sm高度若与图标/文字行高不匹配，文字会贴顶或下沉——这时得回头调$btn-line-height
真正难的是让所有尺寸、所有状态、所有嵌套上下文下的按钮高度都“看起来一致”。变量改得再准，不跑一遍全断点 + 全组件预览，就等于没改。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
