真正可用的响应式侧边固定导航栏需将搜索框置于offcanvas-body内、sidebar-inner设fixed定位、右侧内容加ms-md-3、ios下处理viewport溢出及focusin事件，并用display控制过滤而非删除dom。
真正可用的响应式侧边固定导航栏，不能靠 col-md-3 d-none d-sm-block 硬切——DOM 仍占位、键盘焦点跳过、屏幕阅读器误读，小屏下搜索框压根不渲染。
搜索框必须塞进 offcanvas-body 才能在小屏出现
Bootstrap 5 的响应式逻辑依赖 offcanvas 把侧边栏临时移出文档流。把 form 写在 navbar-brand 同级、row 里，或塞进 navbar-nav 外层，它在小屏下根本不会生成 DOM，不是“隐藏”，是彻底没渲染。
- 正确位置：
<div class="offcanvas-body"> <form><input class="form-control form-control-sm"></form> <ul class="nav"></ul> </div> - 别放在
navbar-collapse里——那是顶部导航逻辑，和侧边栏无关 - 别套
input-group：它自带 padding/margin，和offcanvas-body内边距叠加后容易撑出容器
sidebar-inner 才该设 position: fixed，不是外层 col
直接给 col-md-3 加 position: fixed 会脱离栅格流，导致右侧内容上移、宽度错乱。
- 结构上：用
<div class="sidebar-inner"> 包住菜单和搜索表单，再对它设 <code>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；别指望父容器自动截断 -
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 后菜单会卡住 - 用
element.style.display = "none"或classList.toggle("d-none")控制显隐 - 保持原始 DOM 结构和
tabindex、aria-expanded等可访问性属性不变 - 若用 JS 过滤，建议节流
input事件，避免高频重绘拖慢体验
iOS 下搜索框失焦、键盘闪退的三个硬性处理点
这不是样式问题，是 Safari viewport overflow 保护机制被触发的真实报错，现象包括横向滚动条弹出、输入框瞬间失焦、软键盘闪退。
动态过滤菜单项时，只切 display，别删 DOM
实时搜索匹配后，直接 remove() 或重写 innerHTML 会导致焦点丢失、键盘导航中断、A11Y 属性失效，尤其菜单项超过 50 条时。
固定定位 + 搜索 + iOS 键盘 + 可访问性，四个条件同时满足时，任何一个类名或事件绑定漏掉，都会让整个菜单在真实设备上“看起来能用，实际卡死”。
