真正可用的响应式侧边导航栏需将搜索框置于offcanvas内部的navbar-nav中，避免dom占位与可访问性问题；ios下须加me-2防viewport overflow，并用js监听focusin收起菜单，fixed定位时需清外层边距并手动处理键盘遮挡。
不能只靠 col-md-3 + d-none d-sm-block 实现真正可用的响应式侧边导航栏——dom 仍占位、键盘焦点跳过、屏幕阅读器误读，小屏下搜索框也根本不会渲染出来。
搜索框必须塞进 offcanvas 内部，否则小屏下直接消失
Bootstrap 5 的响应式逻辑全靠 offcanvas 把侧边栏临时移出文档流。把搜索 <form></form> 直接写在 navbar-brand 同级或 row 里，小屏下它压根不参与渲染，不是“隐藏”，是 DOM 根本没生成。
- 正确位置：在
<div class="offcanvas offcanvas-start"> 内部，作为独立 <code><li>塞进<ul class="navbar-nav"></ul> - 别用
ms-auto包整个<form></form>—— 它会随其他导航项一起被收进 offcanvas，用户得先点按钮展开菜单才能看到搜索框 - 若想搜索框“始终可见”（含小屏），就放弃
offcanvas，改用position: fixed+ms-md-3腾空间，但必须手动处理 iOS 键盘遮挡和resize事件 -
me-2提供 0.5rem 右间距，既是视觉呼吸感，也是软键盘弹出时的安全缓冲区 - 若搜索框需居中或左对齐，改用
mx-1或ms-2，别硬套已废弃的ml-2 - 别对
input-group外层再加margin或padding—— 它内部已有 spacing，叠加会导致错位 - 最简解法：给
<input>加data-bs-toggle="offcanvas"和data-bs-target="#sidebarOffcanvas"（与触发按钮一致） - 更稳妥做法：监听
focusin事件，用 JS 主动调用bootstrap.Offcanvas.getInstance(element).hide() - 别依赖
blur收起——用户可能切到别的 App 或点其他输入框，菜单会卡住 - 降级方案：用
position: fixed; start-0 top-0 h-100，同时主内容区加ms-md-3（不能只靠col-md-9）腾出安全间距 - 外层容器必须加
m-0 p-0清掉.container-fluid和.row的默认边距，否则 fixed 定位偏移 - 侧边栏内部菜单过长时，加
overflow-y-auto；别指望父容器自动截断
form-control 在侧边栏里不加 me-2 会触发 Safari viewport overflow
默认情况下，form-control 在 navbar 或 offcanvas 里左右 margin 为 0，紧贴相邻元素。小屏下右侧若有 btn-close 或 navbar-toggler，iOS Safari 会直接报 viewport overflow，导致横向滚动条弹出、输入框失焦、键盘闪退。
点击搜索框不收菜单？因为 offcanvas 不监听 input 的 focus
Bootstrap 的 offcanvas 默认只响应 data-bs-toggle="offcanvas" 按钮或 data-bs-dismiss="offcanvas" 关闭按钮的点击。用户点开搜索框，键盘弹起，但菜单还开着——这不是 bug，是设计如此。
桌面端固定侧边栏 + 搜索框，position: sticky 在 iOS 常静默失效
iOS Safari 对 flex 容器中的 position: sticky 支持极不稳定，容易“跳回顶部”或完全不动。这通常不是代码写错了，而是父级 row 或外层 navbar 带了 transform 或 overflow: hidden。
真正难的不是写几行 HTML，而是让搜索框在 iOS 键盘弹出时不被遮挡、不闪退，且多级折叠菜单能独立控制展开状态——这两点 Bootstrap 原生都不支持，得靠 JS 补足。
