真正可用的响应式侧边栏必须拆为两套逻辑：桌面端用position:fixed/sticky+栅格留白，移动端必须用offcanvas；仅靠col-md-3 d-none d-sm-block会导致DOM占位、键盘焦点跳过及屏幕阅读器误读。
真正可用的响应式侧边固定栏菜单，必须拆成两套逻辑：桌面端用 position: sticky 或 position: fixed + 栅格留白，移动端必须用 offcanvas；只靠 col-md-3 d-none d-sm-block 会留下 dom 占位、键盘焦点跳过、屏幕阅读器误读等硬伤。
为什么搜索框必须塞进 offcanvas-body 里
小屏下，offcanvas 是唯一能真正把侧边栏移出文档流的方式。如果把搜索框放在 navbar-collapse 或 row 里，它根本不会渲染——不是“隐藏”，是 DOM 没生成。
- 正确位置：
<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的内边距叠加后容易撑出容器
position: fixed 侧边栏在桌面端怎么写才不偏移
直接给 .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 后菜单会卡住 - 正确做法：遍历所有
.nav-item，用item.style.display = "none"或"block"切换显隐 - 只比对
textContent，别用innerHTML——否则含图标或 badge 的项会误匹配 - 空搜索时务必恢复全部显示，否则清空输入框后菜单空白
- 若菜单含多级
collapse，过滤后要手动调用bootstrap.Collapse.getInstance(el).hide()关闭不匹配的子菜单
iOS 下搜索框失焦、键盘闪退的三个硬性处理点
这不是样式问题，是 Safari viewport overflow 保护机制被触发的真实报错，现象包括横向滚动条弹出、输入框瞬间失焦、软键盘闪退。
动态过滤菜单项时，别删 DOM
实时搜索匹配后，直接 remove() 或重写 innerHTML 会导致焦点丢失、键盘导航中断、A11Y 属性失效，尤其菜单项超过 50 条时性能暴跌。
最易被忽略的点是：offcanvas 宽度必须用 CSS 变量 style="--bs-offcanvas-width: 280px;" 控制，改 width 或 max-width 会破坏 transform 定位；关闭按钮必须是带 data-bs-dismiss="offcanvas" 的 <button type="button" class="btn-close"></button>，手写 × 或 onclick 会丢掉 ESC 支持和屏幕阅读器语义。
