collapse 默认不收起搜索框是因为其依赖 height 动画，而表单元素父容器若未设明确高度或含 display: none，动画会跳过；需确保外层有唯一 id、data-bs-target 正确指向、避免初始 display: none、检查 overflow 截断等问题。
为什么 collapse 默认不收起搜索框？
因为 Bootstrap 的 collapse 组件依赖 height 动画，而表单元素（比如 input）父容器若设了 display: none 或未设置明确高度，动画会直接跳过——看起来就像“没折叠”。关键不是写错类名，而是容器没撑开、没触发重排。
- 确保搜索框外层有唯一
id，且data-bs-target指向它（注意是data-bs-target="#search-collapse"，不是href） - 避免给折叠容器加
display: none初始样式，Bootstrap 会自己控制 - 如果用了
form-inline或 flex 布局，检查是否父级overflow: hidden截断了展开动画
怎么让搜索框折叠时保留按钮位置？
常见做法是把触发按钮和折叠区域放在同一级容器里，用 flex 或 grid 控制布局流。否则按钮随内容收起后，页面其他元素会上移，体验断裂。
- 把
button和div#search-collapse放进同一个div，设display: flex; flex-direction: column; - 给
#search-collapse加order: 1，按钮加order: 0，保证 DOM 顺序和视觉顺序一致 - 别用
float或绝对定位，它们会让 collapse 失去对高度的感知
collapse 配合 form-control 时的尺寸错位问题
默认 form-control 是块级且带 width: 100%，折叠容器宽度可能被压缩成 0，导致输入框渲染异常或文字截断。
- 给折叠容器加
min-width: 0，防止 flex 容器收缩过度 - 把
form-control改为form-control-sm或手动设width: 100%并加box-sizing: border-box - 如果用了
input-group，确保整个input-group在collapse内部，而不是只包input
移动端点击收起后无法再次展开？
这通常是因为事件绑定冲突：比如在按钮上同时写了 data-bs-toggle="collapse" 和手写的 click 监听器，又调用了 collapse('toggle')，导致状态错乱。
- 只用 Bootstrap 原生 data 属性控制，删掉所有手动
addEventListener对collapse的干预 - 检查是否在 JS 中调用了
myCollapse.hide()后没等hidden.bs.collapse事件就立刻再 show，造成状态残留 - 真要监听，用
shown.bs.collapse和hidden.bs.collapse，别用click或toggle
min-height 或 overflow。动效本身很轻量，但布局一松动，collapse 就失去高度锚点。
