form-control-sm 和 form-control-lg 仅对原生 Bootstrap 表单控件（如 .form-control、.form-select）直接生效，失效常见于加在父容器上、第三方组件未透传 class、自定义 CSS 覆盖、版本混淆（v4 用 .input-sm）、或 input-group 内子元素尺寸类不统一。
form-control-sm 和 form-control-lg 为什么有时没反应
这两个类只对 .form-control、.form-select、.form-check-input 等原生 Bootstrap 表单控件生效，且必须直接加在输入元素上。常见失效场景包括：
- 把
form-control-sm加在<div class="input-group">上，却忘了给内部的<input>也加——尺寸类不继承，只作用于当前元素 - 用了第三方封装组件（如 Vue 的
<b-form-input>或 React 的FormControl），但没透传 class 到底层<input> - 自定义 CSS 强制设了
height、padding或font-size，覆盖了 Bootstrap 的重置逻辑 - Bootstrap 版本是 v4 但写了 v5 的类名（v4 用
.input-sm，v5+ 只认form-control-sm）
input-group 里按钮和输入框高度不一致怎么办
.input-group 内部是 flex 布局，默认 align-items: stretch（v5.3+ 已内置），但实际错位往往是因为子元素尺寸类没对齐或样式干扰：
- 所有子项必须统一尺寸：输入框用
form-control-sm，右侧按钮就得配btn-sm；用form-control-lg就得配btn-lg -
.input-group-text若含图标（如<i class="bi bi-search"></i>），需确保其line-height和font-size与输入框一致，否则视觉偏移 - 避免单独给
.input-group-text设padding或height，它应靠 flex 自然拉伸 - 显式加
align-items-stretch更保险（尤其兼容 v4 项目）：<div class="input-group align-items-stretch">
想微调高度但又不用 sm/lg 类，怎么安全改
硬写 height 容易破坏垂直居中逻辑，推荐以下组合方式：
- 优先调
padding：比如py-1（上下 0.25rem）→py-2（0.5rem），比直接设 height 更可控 - 同步改
font-size和line-height：若加大字号，必须确认line-height足够，否则文字贴顶；可配合 Sass 变量$input-line-height统一控制 - 别单独动
border-width：因为form-control-sm的高度公式含+ 2px（即 border），改 border 会连锁影响最终高度 - 临时调试可用内联 style：
<input class="form-control" style="padding: 0.375rem 0.75rem; font-size: 0.95rem;">，但上线前建议抽成自定义 class
checkbox/radio 高度怎么调
form-control-sm 对复选框/单选框完全无效——它们走的是 .form-check-input 体系，渲染依赖伪元素：
- 不能直接设
width/height在<input type="checkbox">上，浏览器会忽略 - 必须覆盖
::before（未选中外框）和::after（选中对勾）的尺寸与位置 - 例如缩到 16px：
input.form-check-input::before { width: 16px; height: 16px; top: -0.125rem; left: -0.125rem; } -
::after的对勾是 border 绘制的，缩放时要同比例调border-width和transform偏移，否则错位
真正难的不是改数值，而是记住哪些地方改了会影响其他组件——比如调 $input-line-height 要同步看 $btn-line-height，改 .input-group-text 的 padding 会破坏 flex 拉伸。这类细节不报错，但上线后对齐全乱。
