真正可用的响应式固定侧边导航菜单必须用offcanvas移出DOM流，搜索框须置于offcanvas-body内并加me-2、form-control-sm，sidebar-inner设position:fixed，右侧内容加ms-md-3，动态过滤仅切display。
真正可用的响应式固定侧边导航菜单，不能靠 col-md-3 d-none d-sm-block 硬切——DOM 还在、键盘焦点乱跳、屏幕阅读器照读、小屏下搜索框压根不渲染。必须用 offcanvas 把侧边栏临时移出文档流，桌面端再用 position: fixed 单独锚定内部容器。
搜索框必须塞进 offcanvas-body 里，否则小屏下不出现
Bootstrap 5 的响应式逻辑依赖 offcanvas 移出 DOM 流。把 <form></form> 放在 navbar-collapse 或 row 里，它根本不会生成——不是“隐藏”，是没渲染。正确位置只有一处：
<div class="offcanvas-body"><form><input class="form-control form-control-sm"></form><ul class="nav"></ul></div>- 别塞进
navbar-nav同级或navbar-brand后面——那些属于顶部导航域，和侧边栏语义无关 -
form-control-sm是必须的：不加会导致输入框比菜单文字高，视觉割裂 - 别套
input-group：它自带 padding/margin，和offcanvas-body内边距叠加后容易撑出容器
桌面端固定侧边栏，别直接给 col-md-3 加 position: fixed
直接给栅格列加 position: fixed 会脱离 flex 流，右侧内容上移、宽度错乱。真正该固定的是列内部的容器：
- 结构上包一层
<div 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 条时：
- 只切换
style.display = 'none'或'block'，保留 DOM 结构和 tabindex - 避免用
visibility: hidden—— 它仍占空间，键盘焦点还能进去 - 过滤后记得重置
scrollTop = 0，否则滚动位置悬空
真正难的不是让菜单“看起来响应式”，而是让小屏下搜索框可聚焦、键盘可操作、屏幕阅读器能读、iOS 键盘不闪退——这些细节全在 offcanvas-body 的嵌套位置、me-2 的间距控制、focusin 的主动收起逻辑里，漏掉任意一个，用户就会卡在输入框里出不来。
