offcanvas 必须用 data-bs-toggle="offcanvas" 触发，依赖 js 初始化而非 class 切换；方向由 offcanvas-start/end 等类控制，关闭需 data-bs-dismiss="offcanvas"，内容滚动须作用于 offcanvas-body。
Offcanvas 在 Bootstrap 5 中默认不自动适配移动端菜单切换逻辑，必须手动绑定触发行为并处理状态同步，否则点击后不显示或关闭失效。
如何正确初始化 Offcanvas 并绑定按钮触发
Bootstrap 5 的 Offcanvas 不像 v4 的 sidebar 那样依赖 jQuery，它基于原生 DOM 操作，但需要显式调用 bootstrap.Offcanvas 构造函数或 data 属性激活。
- 确保在 HTML 中为 Offcanvas 容器添加
class="offcanvas offcanvas-start"和唯一id（如id="mobile-menu"） - 触发按钮必须带
data-bs-toggle="offcanvas"和对应data-bs-target="#mobile-menu"（注意是bs，不是bs-或旧版data-toggle） - 若用 JS 初始化，需等 DOM 加载完成后再执行：
const offcanvas = new bootstrap.Offcanvas(document.getElementById('mobile-menu')); - 避免在未引入
bootstrap.bundle.min.js（含 Popper）的情况下只引用bootstrap.min.js，否则会报TypeError: Cannot read property 'getInstance' of null
为什么移动端点击后 Offcanvas 不关闭或背景遮罩不消失
常见原因是事件委托冲突或重复初始化——尤其当页面通过 AJAX 加载、或使用前端框架（如 Vue/React）动态渲染时，data-bs-* 属性可能未被重新扫描。
- 每次动态插入 Offcanvas 结构后，需手动调用
bootstrap.Offcanvas.getOrCreateInstance()获取实例，而非重复new - 遮罩层（
.offcanvas-backdrop）由 Bootstrap 自动插入 body 末尾，若项目中已有全局overflow: hidden或position: fixed的布局容器，会遮挡 backdrop 或导致滚动异常 - 关闭时若监听了
hidden.bs.offcanvas事件但未移除旧监听器，可能引发多次回调，建议用offcanvas.hide()主动控制而非依赖点击外部区域
怎样让 Offcanvas 菜单在小屏显示、大屏自动隐藏并转为横向导航
不能仅靠 offcanvas-start 类响应式控制，需结合 Bootstrap 的 display 工具类与 JS 状态判断。
- 菜单容器上加
class="d-md-none"，让其只在md以下断点显示；主导航栏加class="d-none d-md-flex"实现反向隐藏 - 不要依赖
window.matchMedia手动切换 Offcanvas 状态——Bootstrap 本身不监听 resize，需自行监听并在xl及以上宽度调用offcanvas.hide() - 若用户从大屏缩放到小屏再打开菜单，Offcanvas 可能处于隐藏状态但 backdrop 未清除，建议在
resize事件中检查当前断点并重置：if (window.innerWidth >= 768) { offcanvas.hide(); }
Offcanvas 的 DOM 插入时机和 backdrop 生命周期容易被忽略，尤其在 SPA 中反复挂载/卸载组件时，残留的 .offcanvas-backdrop 会阻塞后续交互，清理前务必确认是否已销毁实例。
