正确做法是将图标嵌套在.input-group-text内并用bootstrap icons或内联svg，safari需加align-items:center修复光标偏移，禁用已废弃的.input-group-addon类。
input-group 里图标放哪才不塌陷
Bootstrap 的 input-group 默认只认 .input-group-text 和 .form-control，图标如果直接塞 <i></i> 或用 background-image，容易错位、垂直居中失效、响应式时被裁切。
正确做法是把图标包进 .input-group-text 容器，并用 Bootstrap 自带的图标类（如 bi bi-search）或内联 SVG：
- 用 Bootstrap Icons 时，确保已引入 CSS 或 JS 版本，图标类必须和
.input-group-text同级嵌套 - 避免给图标元素设固定宽高，依赖
display: flex; align-items: center（Bootstrap 5+ 默认支持） - 如果用自定义 SVG，记得加
height: 1rem; width: 1rem;和fill: currentColor，否则颜色/尺寸会脱节
<div class="input-group"> <span class="input-group-text"><i class="bi bi-envelope"></i></span> <input type="email" class="form-control" placeholder="Email"> </div>
左侧图标输入框在 Safari 下光标偏移
Safari 对 flex 子项内行内元素的基线对齐处理更严格，.input-group-text 里的图标若没显式控制对齐，会导致 .form-control 光标上下偏移 1–2px。
解决只需一行 CSS 覆盖（无需全局改）：
- 给
.input-group-text加align-items: center;（Bootstrap 5.3+ 已默认，老版本需补） - 确保图标父容器（即
.input-group-text）没有line-height冲突值，优先用line-height: 1; - 不用
vertical-align: middle—— 在 flex 容器里它无效
input-group-addon 已废弃，别再用
Bootstrap 4 早期有 .input-group-addon，但 4.4 起标记为废弃，5.0 彻底移除。现在所有场景统一用 .input-group-text。
常见错误：
- 复制旧文档代码，保留
.input-group-addon类名 → 图标区域无样式、宽度异常 - 混用
.input-group-text和.input-group-addon→ 样式冲突，边框/圆角不一致 - 以为
.input-group-text只能放文字 —— 实际它完全支持图标、按钮、甚至小开关
带图标的 input-group 响应式断点失效
当给 .input-group 外层加 col-* 栅格类时，图标区在小屏可能被挤压变形，尤其搭配 .form-control-sm 时。
关键在层级控制：
- 不要对
.input-group-text单独设col类 —— 它不是栅格单元 - 需要等宽布局？用
.input-group包裹两个.form-control，再用.input-group-text放中间分隔符，而非图标 - 图标需随屏幕缩放？用
font-size: clamp(0.875rem, 4vw, 1rem);控制图标尺寸，比媒体查询更稳
实际项目里最容易漏的是 Safari 对 flex 基线的处理，以及误用废弃类名导致整个输入组样式断裂 —— 这俩问题一出现，往往先怀疑是图标字体没加载，其实只是类名或对齐没写对。
