必须用 input-group 包裹图标，且图标必须是 input-group-text 的直接子元素；其他方式如 background-image 会导致 ios 光标偏移、缩放裁切、无障碍失效等问题。
必须用 input-group 包裹，图标必须是 input-group-text 的直接子元素——其他任何方式（比如 background-image、伪元素、绝对定位）在 bootstrap 5 中都不被官方支持，且会在 ios safari、高缩放比、屏幕阅读器等场景下出问题。
为什么不能直接给 input 加 background-image
看似省事，实则埋雷：光标在 iOS 上会偏移、缩放 125% 时图标被裁切、aria-label 无法关联图标语义、禁用态（disabled）下图标颜色不会自动变灰。Bootstrap 的无障碍和响应式保障，全依赖 input-group 的 flex 布局与语义结构。
-
input-group-text自动继承父级 font-size 和 line-height，图标垂直居中才稳定 - 图标元素（
i或svg）必须写在input-group-text内部，不能只靠 CSS 插入 - 若用
svg，务必加height="1em"和width="1em"，否则在不同字号下错位
左侧搜索图标 + 右侧清空按钮共存的 DOM 结构
顺序错了就全乱：图标容器必须在 input 前（左），清空按钮容器必须在 input 后（右），且二者都得是 input-group 的**直接子元素**。
- 左侧图标用
<div class="input-group-text"><i class="bi bi-search"></i></div> -
input本身不加额外类，保持form-control即可 - 右侧清空按钮必须用
<div class="input-group-append"><button class="btn btn-outline-secondary"><i class="bi bi-x"></i></button></div> - JavaScript 清空时，记得调用
inputEl.value = ''后触发inputEl.dispatchEvent(new Event('input', { bubbles: true }))，否则 Vue/React 不响应
移动端适配容易忽略的三件事
PC 看着正常，手机上图标缩成一团、点击区域变小、文字遮挡图标——多半是这三点没处理：
-
input-group-text默认 padding 是0.375rem 0.75rem，移动端建议统一设为0.375rem 0.5rem避免过宽 - 确保全局
font-size在@media (max-width: 576px)下没被重置，否则1em图标会失比例 - 不要给
input-group-text设固定width或min-width，它必须靠 flex 自适应
最常被跳过的细节是：图标容器没加 aria-hidden="true"，导致屏幕阅读器重复读“search search”；还有清空按钮没加 type="button"，点一下意外触发表单提交。这些不是“锦上添花”，而是 input-group 正常工作的前提条件。
