必须用.input-group包裹input和button，这是最稳定、语义最清晰的方式；典型结构为<div class="input-group"><input class="form-control" type="text" aria-label="搜索"><button class="btn btn-outline-secondary" type="submit">搜索</button></div>。
Bootstrap 5 搜索框 + 按钮的常见布局写法
直接用 .input-group 包裹 <input> 和 <button> 即可，这是最稳定、语义最清晰的方式。别手写 flex 或 float——容易错位、响应式失效，还破坏表单可访问性。
典型结构如下（注意 class 顺序和必需的 type="submit"）：
<div class="input-group mb-3"> <input type="text" class="form-control" placeholder="搜索..." aria-label="搜索"> <button class="btn btn-outline-secondary" type="submit">搜索</button> </div>
-
.input-group是必须的父容器，它控制子元素间距、边框融合和垂直对齐 -
type="submit"要显式写上，否则在<form>内点击按钮不会触发表单提交 - 按钮用
btn-outline-secondary更符合搜索场景的视觉权重；若需强调，可用btn-primary，但避免两个实色按钮并排 - 移动端下
.input-group默认堆叠为垂直布局，无需额外 media query
按钮放在左边还是右边？影响交互逻辑
Bootstrap 默认按钮在右侧（<input> 在前），这是绝大多数搜索场景的预期行为。但如果你把按钮放左边（比如带语音图标或筛选入口），要改 HTML 顺序，且必须加 .input-group-text 或调整 class，否则边框会断开。
左侧按钮示例（如“?”图标按钮）：
<div class="input-group"> <button class="btn btn-outline-secondary" type="button"><i class="bi bi-search"></i></button> <input type="text" class="form-control" placeholder="搜索..."> </div>
- 左侧按钮建议用
type="button"，避免意外提交；真要提交就用type="submit"并确保 input 在 form 内 - 不要给左侧按钮加
.btn以外的尺寸类（如.btn-sm），否则高度可能和 input 不一致；统一靠.input-group-sm控制整体尺寸 - 图标按钮推荐用 Bootstrap Icons（
bi-search），别用纯文本“搜索”，否则缩小时文字会被裁切
表单提交后清空搜索框的 JS 补充逻辑
Bootstrap 只管样式，不处理行为。用户点搜索按钮后，如果页面是 GET 提交（比如跳转到 /search?q=xxx），刷新后 input 值仍残留——这会让用户误以为还在上次搜索状态。
- 最简单方案：在页面加载后清空 input，但仅限非历史导航场景（比如不是从浏览器后退进来的）
- 更稳妥的做法是监听
submit事件，在提交前手动清空：document.querySelector('form').addEventListener('submit', e => { e.target.querySelector('input[type="text"]').value = ''; }); - 如果用了 AJAX 提交，记得在 success 回调里清空，并 focus 回 input 方便连续搜索
- 别用
autocomplete="off"搞定——它禁的是浏览器自动填充，不是清空值
为什么不用 <input type="search">？
原生 type="search" 在 Safari 和部分旧 Android 上会自带 × 清除按钮，但和 Bootstrap 的 .input-group 兼容性差：清除按钮位置错乱、点击无响应、甚至导致 input 宽度计算异常。Bootstrap 官方文档也明确不推荐混用。
- 坚持用
type="text"，清除功能自己实现（比如加个带data-bs-toggle="tooltip"的小 × 按钮） - 如果非要原生清除，得重置所有
input[type="search"]的 appearance 和 padding，成本高于收益 - 无障碍方面，
type="text"+aria-label已足够，不必为语义微小优势牺牲稳定性
真正麻烦的是按钮和 input 高度微差、focus 状态边框不连贯、以及 form reset 后按钮状态未同步——这些细节没显式写在文档里，但线上环境一压测就暴露。多在 Chrome DevTools 里用 :focus-visible 和 box model 查一遍。
