bootstrap 5.2+ 的 offcanvas 必须用 data-bs-toggle="offcanvas" 触发，目标需有 offcanvas 类和唯一 id；方向由 data-bs-placement 控制，关闭按钮须置于 .offcanvas-header 内并带 data-bs-dismiss="offcanvas"；不响应式，需手动控制显示逻辑。
Offcanvas 组件必须用 data-bs-toggle="offcanvas" 触发
Bootstrap 5.2+ 的 offcanvas 不再支持纯 CSS 触发，必须通过 data-bs-toggle 属性绑定，且目标元素需有 offcanvas 类和唯一 id。漏掉 data-bs-target 或写成 #offcanvasExample 但实际 ID 是 offcanvas，就会点击无反应。
常见错误现象：click 事件不触发任何动画，控制台无报错，DOM 中 offcanvas 元素始终 <code>display: none
- 确保触发按钮含
data-bs-toggle="offcanvas"和data-bs-target="#your-offcanvas-id" - 目标
<div> 必须同时具备 <code>class="offcanvas"、id="your-offcanvas-id"、aria-labelledby（推荐） - 如果用 JavaScript 手动调用，得先初始化实例：
const myOffcanvas = new bootstrap.Offcanvas(document.getElementById('offcanvas')) -
data-bs-placement="start"→ 左侧滑出（等效旧版offcanvas-start） -
data-bs-placement="end"→ 右侧（默认，可省略） -
data-bs-placement="top"或"bottom"→ 顶部/底部覆盖 - 注意：placement 值必须小写，写成
Start或END会失效 - 标准结构中，关闭按钮应为：
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button> - 如需自定义关闭文案，可用
<button>关闭</button>，但data-bs-dismiss属性不能少 - JavaScript 关闭方式：
myOffcanvas.hide()，但前提是实例已正确初始化 - 不要给
offcanvas元素加d-none d-lg-block，否则 JS 初始化可能失败或行为异常 - 推荐结构：一个
<nav class="d-none d-lg-block"></nav>（PC 导航），一个<div class="offcanvas d-lg-none">（移动抽屉），用 JS 或服务端判断是否加载后者 <li>如果硬要复用同一份 DOM，需监听 <code>resize并手动show()/hide()，但要注意避免频繁触发和状态冲突
Offcanvas 的 DOM 结构约束和属性绑定比想象中严格，尤其是 placement 和 dismiss 的位置，错一个字符或少一个属性，整个交互就静默失效。调试时优先检查控制台是否报
侧边栏方向靠 data-bs-placement 控制，不是 class
offcanvas 默认从右侧滑入，要改成左侧/顶部/底部，必须用 data-bs-placement 属性，而不是加 offcanvas-start 这类 class —— 后者在 Bootstrap 5.2+ 已废弃，加了也没效果。
使用场景：管理后台常用左置菜单，移动端常右置操作面板
关闭按钮必须放在 .offcanvas-header 内且带 data-bs-dismiss="offcanvas"
Offcanvas 的关闭逻辑依赖特定结构：关闭按钮（通常是 <button type="button"></button>）必须位于 .offcanvas-header 容器中，并携带 data-bs-dismiss="offcanvas"。放错位置（比如塞进 .offcanvas-body）会导致点击无效，Esc 键仍可关闭，但 UI 操作断裂。
性能影响：缺失该属性时，用户只能靠 Esc 或 backdrop 点击关闭，体验割裂；若同时禁用 backdrop（data-bs-backdrop="false"），则彻底无法关闭
响应式显示需手动控制 show 类 + 媒体查询，Offcanvas 本身不响应屏幕尺寸
offcanvas 是“抽屉”，不是“响应式侧边栏”。它不会在桌面屏自动展开、在手机屏自动折叠——这是开发者要自己处理的逻辑。常见误区是以为加个 class="d-none d-lg-block" 就能实现「PC 显示常驻侧边栏，手机变抽屉」，但这样会破坏 Offcanvas 的 JS 初始化流程。
正确做法是：桌面端用普通 col 或 position: sticky 实现常驻导航；移动端用 offcanvas 替代。两者 DOM 分离，靠媒体查询切换显示
Cannot find element，再确认 data 属性拼写和目标 ID 是否完全一致。
