搜索框必须置于offcanvas-body内，使用form-control-sm和me-2确保ios兼容与视觉一致，长菜单需max-height+overflow-y:auto，桌面端sticky失效时降级fixed并预留空间。
搜索框必须塞进 offcanvas-body，不能放 navbar-collapse 或栅格列里
小屏下如果把搜索 <form></form> 写在 navbar-collapse 或 col-md-3 d-none d-sm-block 里，它根本不会渲染——不是“隐藏”，是 dom 被跳过。bootstrap 5 的响应式逻辑依赖 offcanvas 把侧边栏临时移出文档流，只有塞进 offcanvas-body 才能保证小屏可见、可聚焦、无障碍可用。
- 正确结构：在
<div class="offcanvas-body"> 内部，紧贴顶部加一个 <code><form class="mb-3"></form> - 别用
input-group包裹搜索框——它自带 padding/margin，和offcanvas-body的内边距叠加后容易撑出容器 - 若菜单项超过 200 条，过滤时别
remove()或重写innerHTML，用item.style.display = "none"切换更安全 -
form-control-sm确保与.nav-link行高一致，避免上下错位 -
me-2提供右侧 0.5rem 缓冲区，既是视觉呼吸感，也是软键盘弹出时的安全间距 - 若需左对齐搜索框，改用
ms-2，别用已废弃的ml-2 - 最简解法：给
<input type="search">加data-bs-toggle="offcanvas"和data-bs-target="#sidebarOffcanvas" - 更稳妥做法：用 JS 监听
focusin，调用bootstrap.Offcanvas.getInstance(element).hide() - 别依赖
blur收起——用户可能切到别的 App 或点其他输入框，菜单会卡住 - 优先用
position: sticky; top: 0;，但务必检查其直接父元素是否含transform或overflow: hidden - 失效时降级为
position: fixed; start-0 top-0 h-100;，同时主内容区加ms-md-3腾空间 - 外层容器必须清掉默认边距：
class="m-0 p-0"，否则fixed定位偏移 - 长菜单要加
max-height: calc(100vh - 2rem)和overflow-y: auto，否则直接溢出视口
form-control-sm 是必须的，me-2 在 iOS 下不是可选而是刚需
不加 form-control-sm，输入框高度会比侧边栏其他文字高 4–6px，视觉割裂；不加 me-2（或至少 mx-1），iOS Safari 在软键盘弹出时会触发 viewport overflow，导致横向滚动条闪现、输入框失焦、键盘闪退。
点击搜索框不收起 offcanvas？得手动监听 focusin 事件
Bootstrap 的 offcanvas 默认只响应 data-bs-toggle 按钮或 data-bs-dismiss 关闭按钮，不会因为用户点开输入框就自动收起。这不是 bug，是设计如此——但移动端体验上，用户点搜索框时菜单还开着，键盘一弹就遮住内容。
桌面端固定侧边栏 + 搜索框，position: sticky 在 iOS 常静默失效
iOS Safari 对 flex 容器中的 position: sticky 支持极不稳定，尤其当父级 .row 含 transform（比如被 offcanvas 或 navbar-sticky-top 触发）或 overflow: hidden 时，它会“跳回顶部”或完全不动。
复杂点在于：同一套 HTML 结构无法兼顾桌面端常驻与移动端 offcanvas 弹出，必须用两套 DOM（d-none d-lg-block + d-lg-none），且宽度定制只能靠 CSS 变量 --bs-offcanvas-width，任何硬写 width 或 max-width 都会破坏 transform 定位逻辑。
