Bootstrap 5 侧边栏必须用 offcanvas 组件，需正确配置 data-bs-toggle、data-bs-target 与目标 ID，添加方向类如 offcanvas-start，关闭按钮须含 data-bs-dismiss="offcanvas"，内容滚动设在 offcanvas-body 上，桌面端固定导航不可硬套 offcanvas。
bootstrap 5 的侧边栏侧滑菜单必须用 offcanvas 组件，不是靠 css transform 手写动画，也不是用 dropdown 或 collapse 曲线救国——否则要么不响应、要么无障碍失效、要么移动端点不中。
触发按钮必须带 data-bs-toggle="offcanvas" 和正确 data-bs-target
点击没反应？八成是这两个属性没配对或 ID 不一致。
- 按钮上必须同时有
data-bs-toggle="offcanvas"和data-bs-target="#mySidebar"（或href="#mySidebar"） -
data-bs-target的值必须和目标<div>的id完全一致，大小写、连字符、空格都不能错 - 目标元素必须有
class="offcanvas"，且不能被position: fixed或transform的父容器包裹，否则滑入位置偏移 - v4 升级 v5 时常见错误：把
data-toggle写成旧版，漏掉bs-前缀
方向类必须显式加在 offcanvas 元素上
默认不加方向类，行为不可预测；它不会自动“从左滑入”，得你明确告诉它。
- 左侧滑入：
class="offcanvas offcanvas-start"（不是offcanvas-left） - 右侧滑入：
class="offcanvas offcanvas-end"；顶部/底部同理，只留一个方向类 - 这些类必须和
offcanvas同级写在同一个<div>上，写在父容器里无效 - RTL 页面下
offcanvas-start自动映射为右，无需额外处理
关闭按钮必须用 data-bs-dismiss="offcanvas"
光有个 × 图标、aria-label="Close" 或手写 JS 移除 class 都不行，关不掉是常态。
- 关闭按钮必须是
<button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>，且必须放在offcanvas内部 - 写成
data-dismiss="offcanvas"（少bs-）或放在外部容器里，点击完全无响应 - 手动调用 JS 关闭时，要用
bootstrap.Offcanvas.getInstance(el).hide()，别用el.classList.remove("show")，否则 backdrop 残留 - 移动端若点不到，检查是否被更高
z-index元素遮挡，或按钮本身有pointer-events: none
offcanvas-body 内容滚动要单独设 overflow-y: auto
内容多时直接撑出屏幕？不是高度没设，是滚动没作用到正确容器。
- 滚动样式必须加在
class="offcanvas-body"这个子容器上，不是offcanvas根元素 - 别给
offcanvas加position: relative或自定义width，会破坏 transform 定位逻辑 - 宽度定制统一用 CSS 变量：
style="--bs-offcanvas-width: 280px;" - 如果用了图标或复杂子菜单，Safari 上滑入卡顿，可加
backface-visibility: hidden或transform: translateZ(0)强制硬件加速
最容易被忽略的是：offcanvas 默认仅用于移动端抽屉场景，它不是 layout 组件。想在桌面端固定显示左侧导航，得配合 position-fixed + ms-md-3 等类做真响应式布局，而不是硬套 offcanvas —— 否则小屏堆叠、大屏错位、键盘焦点混乱全都会来。
