Bootstrap如何实现响应式的带有搜索功能的侧边固定菜单

真正可用的响应式侧边固定菜单需将搜索表单置于offcanvas-body内，用form-control-sm确保视觉统一，sidebar-inner设fixed定位并配合ms-md-3避让，iOS下加me-2缓冲、监听focusin收起菜单，过滤时仅切换display而非删DOM。

不能只靠 col-md-3 d-none d-sm-block 实现真正可用的响应式侧边固定菜单——DOM 仍占位、键盘焦点跳过、屏幕阅读器误读，小屏下搜索框甚至根本不会渲染。

搜索框必须塞进 offcanvas-body 里，否则小屏下不出现

Bootstrap 5 的响应式逻辑依赖 offcanvas 把侧边栏临时移出文档流。把搜索 <form> 放在 navbar-collapse 或 row 里，它压根不参与渲染，不是“隐藏”，是 DOM 没生成。

• 正确位置：<p class="offcanvas-body"><form><input class="form-control form-control-sm"></form><ul class="nav"></ul></p>
• 别塞进 navbar-nav 同级或 navbar-brand 后面——那些属于顶部导航逻辑，和侧边栏无关
• form-control-sm 是必须的：不加会导致输入框比菜单文字高，视觉割裂
• 别套 input-group：它自带 padding/margin，和 offcanvas-body 的内边距叠加后容易撑出容器

position: fixed 侧边栏在桌面端怎么写才不偏移

直接给 .col-md-3 加 position: fixed 会脱离栅格流，导致右侧内容上移、宽度错乱。真正该固定的是列内部的容器。

• 结构上：把菜单包进 <p class="sidebar-inner">，再对它设 position: fixed; start-0 top-0 h-100; width: 260px;
• 右侧主内容必须加 ms-md-3（不能只靠 col-md-9），否则大屏下会被遮挡
• 外层 .row 和 .container-fluid 要清掉默认边距：m-0 p-0
• 菜单过长时，sidebar-inner 加 overflow-y-auto，别指望父容器自动截断

iOS 下搜索框失焦、键盘闪退的三个硬性处理点

这不是样式问题，是 Safari viewport overflow 保护机制被触发的真实报错，现象包括横向滚动条弹出、输入框瞬间失焦、软键盘闪退。

• form-control 在 offcanvas 或 navbar 里必须加 me-2——提供 0.5rem 右侧安全缓冲，不是为了“好看”
• 点击搜索框不收菜单？offcanvas 默认不监听 focusin。最简解法：<input data-bs-toggle="offcanvas" data-bs-target="#sidebarOffcanvas">
• 更稳妥做法：监听 focusin，用 JS 主动调用 bootstrap.Offcanvas.getInstance(element).hide()；别依赖 blur，用户切 App 后菜单会卡住

动态过滤菜单项时，别删 DOM，用 display 切换

实时搜索匹配后，直接 remove() 或重写 innerHTML 会导致焦点丢失、键盘导航中断、A11Y 属性失效，尤其菜单项超过 50 条时性能暴跌。

• 正确做法：遍历所有 li.nav-item，根据 textContent 匹配，然后设 style.display = "none" 或 "block"
• 只比对 textContent，别用 innerHTML——否则带图标或 badge 的项会误匹配 HTML 标签
• 空搜索时务必恢复全部显示，否则用户清空输入框后菜单空白
• 如果菜单含多级 collapse，过滤后要手动调用 bootstrap.Collapse.getInstance(el).hide() 关闭不匹配的子菜单

真正难的不是写出来，是让 iOS 键盘弹起时不闪退、让屏幕阅读器能读到过滤后的菜单、让键盘 Tab 键始终能顺序聚焦——这些细节没处理好，整个侧边栏就只是“看起来能用”。