Bootstrap 表单输入框必须添加 form-control 类，否则 padding、border-radius 和 vertical-align 失效导致高度与基线错位；需检查拼写、版本兼容性、box-sizing、父容器间距、display/vertical-align 影响及控件类型差异。
检查 form-control 类是否遗漏或拼错
Bootstrap 表单输入框（<input>、<select>、<textarea>）必须显式添加 form-control 类，否则不会应用默认的 padding、border-radius 和 vertical-align 规则，导致高度不一致、基线错位。常见错误是只写了 form-control 却漏掉 form-control（比如误写成 form-controler 或 formcontrol），浏览器无法匹配 CSS 选择器，直接退化为原生样式。
实操建议：
- 用浏览器开发者工具选中输入框，确认
Computed面板中padding是0.375rem 0.75rem、line-height是1.5；如果不是，大概率没生效 - 检查 HTML 是否混用了 Bootstrap 4/5 的类名：v4 要求
form-control，v5 同样但新增了form-control-lg/sm变体，别把 v4 的input-lg拿来用 - 注意自定义 CSS 是否覆盖了
height或box-sizing—— Bootstrap 依赖box-sizing: border-box，若被设为content-box，padding 就会撑高元素
验证父容器是否套了 form-group 或 mb-3 等间距类
不对齐常不是输入框本身的问题，而是上下元素垂直间距失控。比如 <label> 和 <input> 之间没有足够 margin，label 文字 baseline 和 input 框底边对不齐；或者多个输入框放在同一行时，col 列宽不一致导致视觉偏移。
实操建议：
- Bootstrap 5 已弃用
form-group，改用mb-3（或mb-2）控制 label 与 input 间距，确保每组都有明确的垂直间隔 - 如果是栅格布局（
row+col），检查是否所有col总和超过 12，或用了col-auto与col混搭却没加align-items-center - 用开发者工具临时禁用父级
margin、padding，看是否恢复对齐 —— 如果是，说明间距类配置冲突
排查 display 和 vertical-align 的隐式影响
当输入框和文字、图标、按钮混排时，display: inline-block（Bootstrap 默认）会受 vertical-align: baseline 影响，而 baseline 对齐的是文本底部，不是容器底边，所以输入框常“悬空”半像素。尤其在 form-inline（v4）或 flex-row（v5）中更明显。
实操建议：
- 给输入框父容器加
class="d-flex align-items-center"（v5）或class="form-inline"（v4），强制 flex 布局消除 baseline 干扰 - 避免在同一个
div内混用input和纯文本（如 “×” 删除符号），文本默认vertical-align: baseline，input 默认也是，但字体度量不同，实际位置不同；改用<span class="input-group-text"></span>包裹文字更稳妥 - 如果用了
input-group，确认每个子项（input-group-text、form-control）都存在且未被display: none或visibility: hidden干扰尺寸计算
留意表单控件类型差异带来的高度偏差
<select>、<textarea>、带图标的 input（如 type="date"）在不同浏览器中渲染高度天然不同。比如 Chrome 下 type="date" 输入框比普通 text 高 2px，Firefox 又有差异；textarea 默认 rows="3" 会拉高，但没设 height 时不受 form-control 的固定高度约束。
实操建议：
- 统一使用
form-control+ 显式height（如style="height: calc(1.5em + 0.75rem + 2px)"）可强制等高，但注意破坏响应式；更推荐用form-control-sm/form-control-lg保持语义一致 -
textarea必须设rows属性，否则高度由内容撑开，与其它控件无法对齐；若需固定高度，加style="min-height: Xpx; height: Xpx;"并配合resize: none - 日期/时间控件尽量避免裸用，优先套
input-group或用第三方库（如 Flatpickr）接管样式，减少原生差异
form-control 很可能被覆盖，得靠 !important 或 scoped CSS 强制重置，但那是另一层兼容性问题了。 
