按钮高度不一致的根本原因是内部内容（图标、空格、vertical-align）及父容器font-size影响，而非class错误；应统一用inline-flex布局、锁定font-size、慎用第三方组件Size属性。
按钮高度不一致，根本原因不是 class 写错了
常见错误是看到 .btn-lg 没生效，就反复加 !important 或手动写 height: 40px——这反而会破坏 Bootstrap 的垂直居中逻辑。真正干扰高度的，往往是按钮内部内容：图标、空格、 、<i></i> 的 vertical-align 默认值（baseline），甚至父容器的 font-size 透传。比如 <button class="btn btn-primary"><i class="bi bi-x"></i> 删除</button> 和纯文本按钮，在同一套 CSS 下可能差 1–2px。
实操建议：
- 统一用
display: inline-flex; align-items: center; gap: 4px替代内联图标 + 文本组合，彻底绕过 baseline 对齐问题 - 如果必须用
<i></i>，给它加style="vertical-align: -0.125em"（Bootstrap 5 的推荐偏移值） - 检查父级是否设置了
font-size，它会缩放rem-基准的padding和line-height，间接拉高按钮
响应式 Button 尺寸不能靠 .btn-sm/.btn-lg 堆砌
Bootstrap 原生的 .btn-sm/.btn-lg 是静态类，不随视口变化。想在移动端变小、桌面端恢复默认？直接套媒体查询就行，别依赖 JS 或额外组件库。
实操建议：
- 在自定义 CSS 中写：
@media (max-width: 768px) { .btn-responsive-sm { padding: 0.25rem 0.5rem; font-size: 0.875rem; line-height: 1.5; } } - 把
.btn-responsive-sm和.btn一起加在按钮上，优先级足够覆盖原生类 - 避免用
sm/md这类断点名命名类名——屏幕宽度是连续的，768px是折叠临界点，不是“平板专属”
BootstrapBlazor / Bootstrap Switch 的 Size 属性不等于 CSS class
在 Blazor 组件或 jQuery 插件（如 bootstrapSwitch）里，Size="Size.Small" 或 data-size="small" 是运行时配置项，最终生成的 DOM 可能对应 class="switch-small" 或内联 style，和原生 Bootstrap 的 .btn-sm 完全无关。混用会导致样式冲突或尺寸失效。
实操建议：
- Blazor 中确认组件文档是否支持
Size枚举；若支持，只用它，不要额外加class="btn-sm" - jQuery 版
bootstrapSwitch必须用data-size或初始化时传size: 'mini'，改 CSS 类无效 - 调试时右键检查元素，看最终渲染出的 class 名——
bootstrap-switch-mini和btn-sm是两套体系，不能互相替代
input-group 里按钮高度错位，90% 是 vertical-align 没对齐
在 input-group 中，.input-group-text、.form-control、.btn 默认都设了 vertical-align: middle，但一旦其中某个元素用了图标、设置了 line-height 或被父级 font-size 影响，就会失准。最典型的是右侧附加按钮比输入框矮半像素。
实操建议：
- 给整个
.input-group加style="font-size: 1rem"锁定基准，防止继承污染 - 对
.input-group > *统一加vertical-align: top（比middle更稳定） - 如果用
btn-group套在 input-group 里，确保子按钮没额外margin或border，否则盒模型叠加会溢出
