统一按钮大小需绕过Bootstrap默认行为：btn-sm/btn-lg仅相对缩放，受主题类、边框、字体渲染等影响导致尺寸不一致；推荐自定义固定尺寸类（如btn-fixed-md）并用!important锁死属性，或通过Sass变量覆盖重编译。
直接用 Bootstrap 的 btn-sm 和 btn-lg 类无法统一按钮大小
因为它们只是「相对缩放」：在默认 btn 基础上调整 padding 和 font-size，并不强制所有按钮最终尺寸一致。比如 btn btn-sm 在 btn-primary 和 btn-outline-secondary 上实际高度可能差 2px——边框、内阴影、字体渲染差异都会影响。
真正想「统一大小」，得覆盖或绕过 Bootstrap 的默认行为：
-
btn-sm把padding设为0.25rem 0.5rem，font-size降为0.875rem；btn-lg则是0.5rem 1rem+1.25rem字体 —— 这些值本身就不一致 - 不同主题类（如
btn-outline-*）的border-width和line-height计算逻辑也不同，导致最终盒模型高度浮动 - 如果项目里混用
btn、btn-sm、btn-lg，反而会让尺寸更难管理
推荐做法：自定义统一尺寸类，覆盖 Bootstrap 默认
放弃依赖 btn-sm/btn-lg 的语义，改用明确尺寸命名的类，例如 btn-fixed-xs、btn-fixed-md，并用 !important 锁死关键属性：
.btn-fixed-md {
min-height: 36px !important;
padding: 8px 16px !important;
font-size: 14px !important;
line-height: 1.28571429 !important; /* 保证行高固定，避免文字撑高 */
border-radius: 4px !important;
}这样无论后面加 btn-primary 还是 btn-outline-danger，按钮高度和内边距都严格一致。注意必须加 !important，否则 Bootstrap 的 specificity 往往更高。
立即学习“前端免费学习笔记（深入）”；
如果必须保留 btn-sm 等语义，就重置其计算逻辑
Bootstrap 5 的 btn-sm 实际依赖 $btn-padding-y-sm 等 Sass 变量。如果你用 Sass 编译，最干净的方式是在引入 Bootstrap 前，覆盖这些变量：
$btn-padding-y-sm: 6px; $btn-padding-x-sm: 12px; $btn-font-size-sm: 13px; $btn-padding-y: 8px; $btn-padding-x: 16px; $btn-font-size: 14px; $btn-padding-y-lg: 10px; $btn-padding-x-lg: 20px; $btn-font-size-lg: 15px;
然后重新编译 CSS。这样所有 btn-sm、btn、btn-lg 就会基于你定义的基准值生成，且彼此比例可控。纯 CSS 项目则只能靠后置样式强覆盖。
别忽略按钮内容对尺寸的影响
即使样式完全一致， 和 实际高度仍可能不同——图标字体 baseline、空格、换行符都会触发 line-height 重排。
应对方法：
- 对含图标的按钮，统一用
display: inline-flex; align-items: center; gap: 4px; - 禁用用户选中文字带来的微小偏移：
user-select: none; - 避免在按钮内写
white-space: normal;+ 显式height控制
统一按钮大小不是调几个 class 就完事的事，它本质是控制盒模型 + 内容渲染 + 框架默认行为三者的博弈。越早放弃“靠类名自动对齐”的幻想，越容易落地稳定效果。
