应使用 Bootstrap 的 input-group 而非手动拼接图标，确保垂直对齐、点击区域一致和响应式正常；图标须置于 内，设 bg-transparent border-0 并重绘边框，聚焦时用 shadow-none 和 border-primary 强化反馈；移动端需加 position-relative 防图标错位。
搜索框里图标不居中？用 input-group 而不是手动拼接
直接用 <input> 加 <i></i> 手动堆图标，几乎必然导致垂直对齐错位、点击区域不一致、响应式错乱。bootstrap 的 input-group 是专为这类组合控件设计的容器，它自动处理内外边距、行高继承和 flex 对齐。
- 必须把图标包在
<span class="input-group-text"></span>里，不能用<i></i>或<svg></svg>直接挂外面 -
input-group-text默认是灰色背景，要透明就得加bg-transparent和border-0 - 图标建议用 Bootstrap 自带的
bi-search（需引入 Bootstrap Icons），或用<svg></svg>内联写，避免字体加载延迟导致布局跳动
透明背景 + 圆角边框怎么写才不糊？别漏掉 border 和 focus 状态
只设 bg-transparent 不够——默认 form-control 有 border: 1px solid #ced4da，且聚焦时会叠加 box-shadow。透明背景下，这些边框和阴影就是视觉主体，必须显式控制。
- 加
border-0去掉默认边框，再用border类（如border border-light）重绘你想要的线条 - 聚焦时默认阴影太浓，覆盖掉透明感，得用
shadow-none并配合border-primary强化焦点反馈 - 圆角统一用
rounded-pill（胶囊形）或rounded-3（中等圆角），避免混用rounded和rounded-circle导致左右不对称
搜索图标点击没反应？补上 cursor-pointer 和事件绑定
input-group-text 默认是普通文本容器，不自带点击行为。用户习惯点图标触发搜索，但原生 HTML 不会自动提交表单，得手动干预。
- 给图标包裹的
<span class="input-group-text"></span>加cursor-pointer（或自定义 CSScursor: pointer）表明可交互 - 监听
click事件后，手动调用form.submit()或触发input的change+submit - 更稳妥的做法：把整个
input-group包进<form></form>，图标点击时document.querySelector('form').requestSubmit()，兼容性比submit()更好
移动端键盘弹出后图标被遮挡？position-relative 是关键
在 iOS Safari 或部分安卓浏览器里，软键盘顶起页面时，固定定位或 flex 布局容易让 input-group-text 脱离输入框，图标“飘”到别处。这不是 Bug，是浏览器视口计算差异。
- 给外层
<div class="input-group"> 加 <code>position-relative - 确保图标所在的
input-group-text没有position: absolute或transform干扰布局流 - 如果用了自定义 SVG 图标，检查其
width/height是否设为1rem或1.25rem，避免因尺寸过大撑开容器
实际用的时候，最常被忽略的是聚焦状态的边框重绘和移动端的
position-relative ——其他样式一调就见效，这两个不加，要么看起来像没聚焦，要么在手机上点半天图标没反应。
