应使用 bootstrap 5.2+ 的 offcanvas 组件实现抽屉菜单，因其原生支持多方向弹出、遮罩、键盘关闭、焦点管理，且比 modal 或 collapse 更可靠；需正确设置结构、属性及响应式类，并注意关闭逻辑、性能优化与 ios 滚动兼容性。
抽屉菜单用 offcanvas 组件，不是 modal 或 collapse
Bootstrap 5.2+ 内置了 offcanvas，专为侧滑抽屉设计，比手写 CSS + JS 更可靠。它原生支持左/右/顶部/底部弹出、 backdrop 控制、键盘关闭（Esc）、焦点管理——这些用 modal 硬改会漏行为，用 collapse 则缺过渡动画和遮罩层。
关键点：
-
offcanvas必须包裹在<div class="offcanvas"> 中，且需有 <code>id和data-bs-placement属性（如data-bs-placement="end"表示右侧弹出） - 触发按钮必须带
data-bs-toggle="offcanvas"和对应data-bs-target="#xxx"或href="#xxx" - 关闭按钮只能是
<button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>，不能用自定义图标或onclick手动调用hide()，否则破坏焦点恢复逻辑 - 抽屉容器（
<div class="offcanvas">）加 <code>offcanvas-start d-lg-none（或offcanvas-end），确保只在lg下不渲染 - 触发按钮（通常是汉堡图标）加
d-lg-none，大屏时隐藏 - 大屏导航栏内容（如
<ul class="navbar-nav"></ul>）加d-none d-lg-flex，小屏时隐藏，避免重复 - 关闭按钮没放在
offcanvas-header或offcanvas-body内部——Bootstrap 要求它必须是offcanvas的直系子元素或其内部容器的子元素，否则事件委托失败 - 用了自定义 SVG 或
<i class="icon-close"></i>替代btn-close，但没加data-bs-dismiss="offcanvas"属性 - 手动调用
Offcanvas.getInstance(el).hide()后又重新初始化了实例，导致引用丢失 - 抽屉内容里有
stopPropagation()的事件监听器（比如某些轮播图或下拉菜单），拦截了关闭事件冒泡 - 禁用遮罩：加
data-bs-backdrop="false"属性，同时移除data-bs-keyboard="true"（因 Esc 关闭依赖 backdrop 焦点） - 简化过渡：覆盖 CSS 变量
--bs-offcanvas-transition，例如设为transform 0.2s ease-in-out，比默认的0.3s更利落 - 避免在
offcanvas-body内放重绘频繁的组件（如 Canvas 动画、大量 SVG），改用懒加载或条件渲染
响应式控制：只在小屏显示抽屉，大屏自动转为常规导航
Bootstrap 不提供“仅小屏启用 offcanvas”的开箱即用方案，得靠 display 工具类 + 媒体查询组合控制。直接给 offcanvas 加 d-none d-lg-block 是错的——它会让整个组件在大屏消失，但触发按钮还留着，逻辑断裂。
正确做法是分层隐藏：
注意：d-lg-none 对应 min-width: 992px，若需在 md（768px）切，换成 d-md-none 和 d-md-flex 即可。
关闭按钮失效？检查 data-bs-dismiss 和父级结构
常见现象：点击 × 没反应，控制台无报错，但抽屉不关闭。大概率是以下之一：
调试建议：在关闭按钮上右键 → “检查”，确认其 DOM 路径是否在 div.offcanvas 下；执行 console.log(bootstrap.Offcanvas.getInstance(document.getElementById('myOffcanvas'))) 看实例是否存在且状态为 isShown: true。
侧滑动画卡顿或不流畅？优先关掉 backdrop 或降级过渡
offcanvas 默认启用半透明遮罩（backdrop）和 transform 过渡，但在低端安卓或旧版 iOS 上可能掉帧。实测中，backdrop 是主要性能瓶颈，尤其当页面内容复杂时。
别碰 transition: none —— 它会让抽屉瞬间闪现，破坏用户体验，也违反可访问性要求（屏幕阅读器依赖过渡状态通知）。
真正麻烦的是嵌套滚动：当抽屉内容高度超过视口，iOS Safari 里 overflow-y: auto 容器常无法拖动。解决方案只有两个：要么用 -webkit-overflow-scrolling: touch（仅 Safari 有效），要么放弃纯 CSS 滚动，换 simplebar 这类 JS 滚动库——但会增加包体积，得权衡。
