根本原因是浏览器对表单控件渲染逻辑不同：子元素无共享高度上下文，混用尺寸类时.input-group-text不继承font-size/padding；需align-items-stretch+min-height统一拉伸，且尺寸类须手动同步至所有子项。
input-group子元素高度不一致的根本原因
不是样式没加对，是浏览器对表单控件的渲染逻辑不同：.btn、.input-group-text、.form-control 默认没有共享高度上下文，尤其当混用 form-control-sm 和默认尺寸时，input-group-text 不会自动继承 font-size 或 padding。Bootstrap 5 的 .input-group 虽默认 display: flex，但若没显式设 align-items: stretch，子项就按各自内容撑高。
让所有子项拉满父高的最小改动
别碰 height，直接用 Flex 拉伸 + 统一最小高度基准：
-
.input-group必须有align-items-stretch（v5.3+ 默认已加，但 v5.0–5.2 需手动补） - 所有直系子元素（
.form-control、.btn、.input-group-text）都要加min-height: calc(1.5em + 0.75rem + 2px) -
.btn和.input-group-text别单独设line-height或padding，否则破坏拉伸一致性 - 如果用了
form-control-lg或form-control-sm，对应子项也得加btn-lg或btn-sm—— 尺寸类不会跨组件自动同步
textarea 和 select 在 Safari 中高度异常怎么处理
textarea 忽略 height、select 在 Safari 里不响应像素高度，是因为它们的 UA 样式优先级更高。靠 min-height + box-sizing: border-box 才可靠：
- 确保
.form-control已有box-sizing: border-box（Bootstrap 5 默认满足） - 对
textarea单独加min-height: calc(1.5em + 0.75rem + 2px)，并设resize: vertical防止横向拉伸 -
select若仍偏矮，检查是否被自定义appearance: none破坏原生高度；Safari 下可加-webkit-appearance: none配合padding微调，但慎用
为什么加了 align-items-stretch 还是错位
常见结构陷阱比样式本身更致命：
-
.input-group外层被form或div包裹，且该容器设了display: block或overflow: hidden，会截断 flex 布局传播 -
.input-group-text里嵌了i图标但没设vertical-align: middle，图标 baseline 拉高整体视觉高度 - 用了 Bootstrap Icons 但漏掉
bi类前缀，或图标字体加载失败，回退成文字后行高突变 - 自定义 CSS 里写了
.input-group > * { height: auto !important }，覆盖了min-height计算
真正起效的永远是 DOM 层级 + Flex 上下文 + 尺寸类三者对齐，少一个环节，高度就“塌”半像素。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
