图标与文字重叠的根源是input未预留图标空间：必须将图标用input-group-text包裹并作为input同级子元素，同时为input设置足够padding（如ps-4），并统一图标与input的line-height和响应式间距。
文字和图标重叠，根本不是图标没对齐，而是 input 的内边距（padding）没为图标预留空间。
input-group-text 没包住图标，或没加到 input 同级
常见错误是把 <i class="bi bi-search"></i> 直接写在 <div class="input-group"> 外面，或者嵌套在额外的 <code><span></span> 里但没加 input-group-text 类。Bootstrap 的 input-group 依赖 flex 布局和语义类来分配空间，脱离结构后图标就“掉进” input 的内容区了。
- 必须确保图标包裹在
<span class="input-group-text"></span>内（Bootstrap 5+），且该span和<input class="form-control">是<div class="input-group"> 的**同级直接子元素** <li>不要写成：<code><div class="input-group"> <input><div><i></i></div> </div>—— 中间多了一层<div>，flex 子项关系被破坏 <li>也不要用 <code>position: absolute叠加图标，否则input宽度仍占满全宽，文字自然撞上去 - 左图标场景：给
<input>加class="ps-4"（Bootstrap 5.3+）或自定义style="padding-left: 2.5rem;" - 右图标场景：用
pe-4或padding-right: 2.5rem，数值需略大于input-group-text的宽度（含图标、内边距） - 别只靠
input-group-text的padding—— 那是图标的内边距，不是 input 的 - 统一控制图标大小：推荐
fs-4（约 1.5rem），并确保input-group-text的height和line-height与form-control一致（Bootstrap 默认已做，勿覆盖） - 避免混用尺寸类：
h5+fs-3+text-lg同时出现，会导致高度计算冲突 - 检查浏览器 DevTools 的 Computed 面板：确认
input的实际height和line-height是否等于input-group-text的高度
input 缺少左右 padding，导致文字溢出到图标区域
input-group-text 只负责“画图标”，不自动给 input 加内边距。如果 input 的 padding-left（左图标）或 padding-right（右图标）没手动设够，输入的文字就会直接顶到图标下面。
图标尺寸过大或 line-height 不匹配，撑高容器引发错位
当图标用 fs-5 或 display-4 这类大字号类，而 input 的 line-height 仍按默认值（如 1.5）计算时，图标会把整个 input-group 行高拉高，文字基线偏移，视觉上像“叠在一起”。
最常被忽略的一点：重叠问题往往在移动端更明显，因为小屏下 input-group-text 的宽度压缩后，input 的 padding 却没随断点动态调整 —— 所以响应式场景务必用 ps-sm-3 ps-md-4 这类断点类，而不是固定 ps-4。
