Bootstrap搜索框必须用form包裹并设role="search"，input需type="search"，结构须符合input-group规范，移动端需适配宽度与按钮显示，样式应通过CSS变量而非直接写border控制。
搜索框用 form 包裹，不是随便放个 input 就行
Bootstrap 的搜索框本质是带样式的表单控件，必须套在 form 里才能正确继承间距、响应式行为和语义化属性。漏掉 form 标签会导致：提交逻辑失效、移动端点击区域变小、屏幕阅读器无法识别为可交互元素。
- 一定要加
role="search"到form上，这是无障碍关键 -
input必须设type="search"，否则 iOS 键盘不会显示“搜索”按钮 - 别用
div模拟表单——Bootstrap 的.input-group和.form-control类只对真实表单元素生效
input-group 是搜索框布局的核心，但容易错用结构
Bootstrap 不靠 CSS Grid 或 Flex 手动排按钮和输入框，而是依赖 input-group 的固定 DOM 结构。常见错误是把按钮塞进 input-group 外面，或把图标写成独立 span 而没加 .input-group-text 类。
- 结构必须严格：
<div class="input-group"><input class="form-control"><button class="btn btn-outline-secondary">搜索</button></div> - 如果加搜索图标，图标容器要用
<span class="input-group-text"><i class="bi bi-search"></i></span>，不能直接写<i> - 按钮加
type="submit"，否则回车无法触发表单提交
移动端适配不是自动的，form-control 需配合 col 或 flex 控制宽度
默认 .form-control 是 100% 宽度，但在导航栏或卡片里放搜索框时，它会撑满父容器，导致按钮被挤出视口。Bootstrap 不会帮你判断“这里该多宽”，得手动约束。
- 在
navbar中使用：给input-group加class="w-100"或用col-auto+col组合控制伸缩 - 避免直接设
width: 200px这类固定值——破坏响应式断点 - 小屏下建议隐藏按钮文字，只留图标：
<button class="btn btn-outline-secondary d-flex d-md-none"><i class="bi bi-search"></i></button>
自定义样式时，优先覆盖 --bs-form-control-border-color 而非直接改 border
Bootstrap 5.3+ 用 CSS 变量控制表单颜色体系，硬写 border: 1px solid #666 会和焦点态、禁用态、悬停态冲突，导致边框在不同状态间跳变。
- 想统一边框色：在父容器上设
style="--bs-form-control-border-color: #999;" - 改圆角？用
--bs-form-control-border-radius，别碰border-radius原生属性 - 图标颜色不随主题变？检查是否漏了
.text-muted或.text-body-tertiary类，原生图标没继承文本色
form 的 onsubmit 阻止默认刷新，以及 input 的 aria-label 缺失——这两处不补，用户一按回车页面就跳走，屏幕阅读器念不出“搜索框”三个字。 
