Bootstrap 5 中 input-group 图标不居中，主因是移除 .input-group-addon、改用 .input-group-text 且依赖 flex 对齐，而图标字体大小、行高、内边距未统一；应包裹于 .input-group-text 内，右侧图标推荐绝对定位或反向 DOM+order 控制，点击需确保 input 聚焦，样式覆盖建议用 !important 针对图标元素。
Bootstrap 5 中 input-group 里图标不居中？
默认用 input-group 套 input 和 span 放图标，但图标上下偏移、和输入框对不齐——根本原因是 Bootstrap 5 移除了 .input-group-addon，改用 .input-group-text，且默认垂直对齐方式依赖 display: flex 和 align-items: center，但若图标是 <i></i> 或 <svg></svg>，字体大小、行高、内边距没统一就会错位。
实操建议：
- 必须用
<span class="input-group-text"><i class="bi bi-search"></i></span>包裹图标，不能直接把<i></i>插在input-group里 - 确保图标类（如 Bootstrap Icons）已加载，且 CSS 未被覆盖；检查浏览器开发者工具里
.input-group-text是否有padding被重置 - 如果用 SVG，加
height: 1.5em; width: 1.5em; vertical-align: middle;显式控制尺寸和基线
想把图标放在 input 右侧而不是左侧？
Bootstrap 的 input-group 默认只支持左侧插件（.input-group-text 在 input 左），右侧没原生类。硬塞到右边会破坏 flex 排序，导致图标浮动或换行。
实操建议：
- 不用
input-group，改用相对定位：给div设position: relative，input宽度设为100%，图标用position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%); - 如果坚持用
input-group，可反向排列 DOM：<input><span class="input-group-text">...</span>，再加 CSS.input-group > * { order: 1; } .input-group > input { order: 0; } - 注意响应式：绝对定位方案在小屏下可能遮挡文字，需配合
padding-right预留空间
图标点击后触发搜索，但 input 失去焦点？
常见于用 <button type="button"></button> 包图标并绑定 JS 事件，结果按钮默认行为干扰了 input 的 focus 状态，用户点完图标还得手动点回输入框。
实操建议：
- 图标容器用
<button type="button" class="btn btn-outline-secondary"></button>，但加tabindex="-1"防止键盘聚焦干扰 - JS 里触发搜索前，先
input.focus()，再执行逻辑；避免直接event.preventDefault()后忽略焦点管理 - 更稳妥的做法：图标用
<span role="button" tabindex="0"></span>替代button，自己处理空格/回车键响应，不打断原生表单流
自定义图标尺寸和颜色总被 Bootstrap 样式覆盖？
.input-group-text 有默认 font-size、color 和 background-color，直接在 <i></i> 上写 style="font-size: 1.2rem" 往往无效，因为父级设置了 font-size: 0.875em 并继承。
实操建议：
- 优先用 CSS 类覆盖：写
.input-group-text i { font-size: 1.25rem !important; color: #6c757d; }，!important在这里合理，因 Bootstrap 的 specificity 很高 - 不要改
.input-group-text的padding，它负责撑开高度；改图标内部的margin或line-height更安全 - 深色主题下，记得同步调整图标
color，否则可能变成黑底黑图标
真正麻烦的是图标和 input 边框圆角不一致、禁用状态时图标灰度不同、以及 Safari 下 flex 对齐偶尔失效——这些得靠实际设备调试，光看文档没用。
