Bootstrap响应式搜索框需手动控制显隐：大屏用.input-group含图标按钮与输入框横向排列，小屏隐藏图标、输入框占满全宽；依赖d-和w-工具类而非JS或collapse。
搜索框在不同屏幕尺寸下如何切换布局
Bootstrap 默认的 .form-control 和 .input-group 不会自动“折叠图标 + 展开输入框”，必须手动控制元素显隐和结构响应式切换。核心思路不是靠单个 class，而是用 display 工具类配合 .input-group 的结构拆分。
大屏显示带图标的紧凑搜索框
在桌面端（md 及以上），让搜索框保持紧凑：左侧图标按钮 + 右侧输入框，宽度固定或自适应。关键点是把图标按钮和输入框放在同一个 .input-group 内，并用 .input-group-text 包裹图标容器。
- 图标建议用
<button type="button"><i class="bi bi-search"></i></button>，避免语义错误 - 给按钮加
.btn .btn-outline-secondary并设padding: 0.375rem 0.75rem保持高度一致 - 输入框用
.form-control，不要设width，让它由父容器撑开 - 整个
.input-group加flex-nowrap防止小屏下换行错位
小屏展开为全宽输入框并隐藏图标按钮
在 sm 或 xs 下，图标按钮不再需要——用户点击即聚焦，且空间有限。直接隐藏按钮，让输入框占满整行宽度即可。不能只靠 d-none d-sm-block，因为隐藏后 .input-group 的 flex 布局会塌陷，需额外处理。
- 给图标按钮加
d-none d-md-block：仅在md及以上显示 - 给输入框加
w-100 w-md-auto：小屏强制 100% 宽，大屏恢复自动宽度 - 整个
.input-group加flex-md-row（默认是flex-column）确保大屏横向排列 - 如果用了
.input-group-sm，注意小屏下font-size和padding仍需适配，建议统一用.form-control-sm而非全局缩放
为什么不用 collapse 或 JavaScript 切换
纯 CSS 响应式更轻量、无 JS 依赖、SEO 友好。用 collapse 会引入额外 DOM 结构和 JS 初始化逻辑，且默认动画可能干扰表单焦点行为；手动写 JS 切换 classList 容易遗漏 resize 事件监听，窗口拖拽时状态不同步。Bootstrap 的 d-*-* 和 w-*-* 已足够表达这个需求。
容易被忽略的是：图标按钮若用 <i> 直接包裹，小屏隐藏后其父 .input-group-text 仍占位，必须确保该容器也同步隐藏——所以要把 d-none d-md-block 加在按钮上，而不是外层 .input-group-text。
