必须使用input-group而非手动拼接图标，因其是专为组合控件设计的flex容器，自动处理垂直对齐、点击区域一致性和响应式行为；手动拼接会导致对齐错位、点击无反馈及移动端图标飘移。
直接用 input-group 包裹搜索框和图标，再加 bg-transparent border-0 和响应式类控制布局，就能实现真正可用的响应式带图标搜索框组——硬拼 <i> 或套 btn 类反而会让小屏错位、点击热区失效。
为什么必须用 input-group 而不是手动拼图标
手动把 <i class="bi bi-search"></i> 和 <input> 并列写，会导致三类问题：垂直对齐靠猜、图标点击无反馈、移动端软键盘弹出后图标“飘走”。input-group 是 Bootstrap 专为这类组合控件设计的 flex 容器，自动继承行高、对齐方式和响应式行为。
-
input-group-text必须是input-group的直接子元素，不能嵌套在额外<div>里 - 图标建议用
<svg>内联或bi-search（需显式引入 Bootstrap Icons CSS） - 别给
input-group-text加float或position: absolute，会破坏 flex 布局流
bg-transparent 后边框和聚焦态怎么补全
只加 bg-transparent 不够——默认 form-control 有灰色边框，聚焦时叠加阴影，透明背景下这些就是视觉主体，必须显式重绘。
- 先用
border-0清掉默认边框，再用border border-light或border-bottom补一条线 - 聚焦时去掉默认阴影：
focus-shadow-none，并用border-primary强化焦点边框 - 圆角统一用
rounded-pill（胶囊形）或rounded-3，避免混用rounded和rounded-circle
响应式断点下图标和文字如何切换布局
大屏横排（图标左、文字右）、小屏竖排（图标上、文字下、居中），不用写媒体查询，用 Bootstrap 内置工具类组合即可。
- 默认横排：
d-flex align-items-center+gap-2控制图标与输入框间距 - 小屏竖排：
d-sm-flex flex-sm-column align-items-sm-center text-sm-center - 外层
input-group加position-relative，防 iOS Safari 软键盘顶起时图标错位
图标点击没反应？补交互和语义
input-group-text 默认只是容器，不自带点击行为。用户习惯点图标触发搜索，但 HTML 不会自动提交表单。
- 给
input-group-text加cursor-pointer，表明可交互 - 监听
click或更稳妥的mousedown（防移动端 blur 先于 click） - 事件里调用
document.querySelector('form').requestSubmit()，比submit()兼容性更好 - 如果搜索框独立存在（没包
<form>），得手动触发input的change+blur
最容易被忽略的是：图标字体必须显式引入，bi-search 不会随 Bootstrap CSS 自动加载；还有 input-group 外层别设 overflow: hidden，否则小屏下拉建议列表会被截断。
