bootstrap 5.2+ 应使用 offcanvas 组件实现侧边抽屉菜单，而非硬套 navbar；需用 data-bs-toggle="offcanvas" 触发，配合 offcanvas-start/end 类控制方向，offcanvas 必须为 body 直接子元素且与 navbar 分离，以确保 backdrop、esc 关闭、键盘导航等无障碍功能正常。
用 offcanvas 组件最直接，别硬套 navbar 做侧滑
Bootstrap 5.2+ 内置的 offcanvas 就是专为侧边滑动拉出设计的，比改写 navbar 的 CSS 或 JS 更可靠。强行用 navbar + collapse 模拟侧滑，会遇到 backdrop 不遮罩、键盘焦点丢失、移动端手势冲突等问题。
典型错误现象：navbar-collapse 在小屏展开后无法自动收起、点击空白处不关闭、aria-expanded 状态不同步、屏幕阅读器识别异常。
-
offcanvas默认支持 backdrop、esc 关闭、点击外部关闭、键盘 Tab 导航闭环 - 必须用
data-bs-toggle="offcanvas"触发，不能只靠show类手动控制 - 侧边位置由
offcanvas-start（左）或offcanvas-end（右）决定，不是靠float或margin-left - 如果需要和顶部
navbar共存，把offcanvas放在一级，不要嵌套进navbar容器里
offcanvas 和 navbar 如何共存不打架
常见场景是顶部固定导航栏 + 右侧滑出菜单（比如用户设置、筛选面板）。两者结构要分离，CSS 层叠关系要理清： offcanvas 的 z-index 必须高于 navbar（默认 1000），否则会被盖住。
实操建议：
- 把
<div class="offcanvas offcanvas-end"> 直接放在 <code>下，紧挨<nav class="navbar"></nav>后面 - 确保
offcanvas的tabindex="-1"存在，否则键盘无法聚焦到内容区 - 如果
navbar是fixed-top，offcanvas的top偏移需手动设为var(--bs-navbar-height)，否则顶部会被遮挡 - 避免给
offcanvas-body设height: 100%—— 它会撑满视口，导致内部滚动失效；应设max-height: calc(100vh - var(--bs-navbar-height)) - 只对
offcanvas-end监听右侧滑动（touchstart.clientX > window.innerWidth - 30），避免误触 - 滑动距离阈值建议设为
40px，太小易误判，太大难触发 - 触发后立即
event.preventDefault()，否则可能触发页面滚动 - JS 中获取实例要用
bootstrap.Offcanvas.getOrCreateInstance(el)，别用new bootstrap.Offcanvas(...)重复初始化
移动端手势滑动支持要手动加，offcanvas 默认不响应
Bootstrap 官方 offcanvas 不支持手指从屏幕边缘滑入触发（iOS Safari / Android Chrome 的原生侧滑习惯），必须自己监听 touchstart/touchmove 并调用 show() 方法。
关键点：
示例片段（触发右滑）：
const oc = document.getElementById('myOffcanvas');
const ocInst = bootstrap.Offcanvas.getOrCreateInstance(oc);
document.body.addEventListener('touchstart', e => {
if (e.touches[0].clientX > window.innerWidth - 30) {
ocInst.show();
}
});
IE11 或旧版 Android WebView 需要降级 fallback
offcanvas 依赖 transform + transition + backdrop-filter，IE11 完全不支持，部分 Android 4.x WebView 对 transform: translateX() 动画有渲染 bug（闪屏、卡顿）。
能做的有限但实用：
- 用
@supports (transform: translateX(0))区分现代/旧环境，在旧环境改用left: 0+position: fixed模拟，放弃动画 - 禁用 backdrop（
data-bs-backdrop="false"），旧引擎中半透明遮罩常导致性能骤降 - 避免在
offcanvas内使用sticky或position: sticky元素，旧内核解析不稳定 - 如果项目仍需兼容 IE11，建议直接用
sidebar.js这类轻量独立库替代，比 patch Bootstrap 更可控
真正麻烦的不是“怎么让它动起来”，而是“动完之后焦点在哪、屏幕阅读器说什么、键盘 Tab 路径是否闭环、缩放后布局是否错位”——这些细节不处理，侧滑菜单就只是个视觉动效，不是可用的导航组件。
