Bootstrap 5 Offcanvas 必须用 data-bs-toggle="offcanvas" 触发，依赖 JS 初始化而非 class 切换；方向由 offcanvas-start/end 等类控制，关闭需 data-bs-dismiss="offcanvas"，内容滚动须作用于 offcanvas-body。
Offcanvas 组件必须用 data-bs-toggle="offcanvas" 触发
bootstrap 5 的 offcanvas 不是靠 class 切换显隐，而是依赖 data 属性和 js 初始化。漏掉 data-bs-toggle="offcanvas" 或写成 data-toggle="offcanvas"（v4 写法）会导致点击无反应。
常见错误现象：click 事件监听了，但侧边栏不动；控制台没报错，DOM 里 offcanvas 元素也存在，就是不展开。
- 触发按钮必须带
data-bs-toggle="offcanvas"和data-bs-target="#myOffcanvas"（或href="#myOffcanvas"） -
target对应的 offcanvas 容器需有匹配的id，且必须含class="offcanvas" - 如果手动 JS 调用，得先确保 DOM 已就绪：
new bootstrap.Offcanvas(document.getElementById('myOffcanvas')) - v4 升级 v5 时容易漏改
data-toggle→data-bs-toggle，这是最常卡住的点
侧边栏方向由 class="offcanvas-start" 或 "offcanvas-end" 控制
Bootstrap 5 默认只提供左右两侧（start/end）和上下（top/bottom）四种基础方向，没有“左侧固定”或“右侧悬停”这种混合模式 —— 它本质是模态层，不是 layout 布局组件。
使用场景：移动端菜单、操作抽屉、筛选面板。别试图把它当 sidebar 用在桌面端主布局里，否则响应式会打架。
-
offcanvas-start：从左滑入（LTR 语言下），等效于left: 0 -
offcanvas-end：从右滑入，适合操作日志、详情预览等辅助面板 - 方向类必须和容器同级写在
<div class="offcanvas offcanvas-end">上，写在父容器上无效 - 不支持同时设置多个方向类，也不支持运行时动态切换方向（得销毁重建实例）
关闭按钮必须用 data-bs-dismiss="offcanvas"，不能只靠 aria-label="Close"
很多开发者以为加个叉号图标 + aria-label 就能关，结果点了没反应 —— 关闭逻辑完全依赖 data-bs-dismiss="offcanvas" 这个触发器，JS 内部靠它定位并隐藏当前 offcanvas 实例。
性能影响：每个 offcanvas 实例自带 backdrop 和 keyboard 支持，默认启用。如果页面有多个 offcanvas，又没手动 dispose()，可能累积事件监听器。
- 关闭按钮可以是
<button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>，也可以是自定义文字按钮：<button data-bs-dismiss="offcanvas">取消</button> - 若禁用键盘 ESC 关闭，初始化时传
{ keyboard: false }；禁用背景点击关闭则传{ backdrop: false } - 别在 offcanvas 内部用
position: fixed子元素，它会脱离 offcanvas 的 transform 容器，导致定位漂移
嵌套滚动和内容溢出要手动处理 class="offcanvas-body"
Offcanvas 默认不限制内部内容高度，长列表或表单容易撑爆视口、遮挡底部按钮，甚至让关闭按钮滑出可视区。Bootstrap 只提供了 offcanvas-body 这个语义化 wrapper，滚动行为得自己加。
容易踩的坑：overflow-y: auto 加错位置（比如加在 .offcanvas 上会连 backdrop 一起滚）、iOS 上滚动卡顿、输入框聚焦后页面缩放错位。
- 务必把
overflow-y: auto加在.offcanvas-body上，而不是外层.offcanvas - 为防 iOS 滚动粘滞，建议加
-webkit-overflow-scrolling: touch - 如果 offcanvas 里有
form或select，测试真机键盘弹起是否顶飞关闭按钮 —— 此时可能需要监听resize动态调整max-height - 不要给
.offcanvas设height: 100vh，它本身已用transform定位，设高反而破坏动画流
复杂点在于：offcanvas 是 JS 驱动的模态组件，它的显示/隐藏状态不反映在 class 切换上（不像 collapse），所以基于 class 的 CSS 响应式控制很弱；真正要定制动画节奏或过渡效果，得重写 CSS 变量或覆盖 --bs-offcanvas-transition，而不是改 JS。
