使用bootstrap 5 offcanvas组件时，必须严格遵循其api规范：关闭按钮需为且置于offcanvas容器内header中；大屏常驻需结合媒体查询与js同步状态，并禁用backdrop和keyboard；滚动区域避免遮挡按钮，事件与定时器须在hidden.bs.offcanvas/show.bs.offcanvas中手动清理。
直接用 offcanvas 组件，别自己写 transform 动画或套 sidebar 类——Bootstrap 5 没这玩意，硬套会丢键盘关闭、遮罩、无障碍支持。
关闭按钮必须是 <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
手写 ×、用 onclick、或者把按钮放错位置，都会导致 ESC 关不掉、屏幕阅读器读不到、iOS 滑动边缘触发失效。
- 按钮必须放在
offcanvas容器内部，且不能嵌套在offcanvas-body的滚动区域里（否则 iOS Safari 会裁掉） - 必须带
type="button"，否则表单提交时意外触发 - 不要加
aria-hidden="true"或手动移除show类——data-bs-dismiss="offcanvas"才是唯一可靠入口 - 如果通知栏要自动关闭，定时器得在
hidden.bs.offcanvas里清除，否则多次打开会堆积
offcanvas 在桌面端常驻 + 小屏侧滑，得靠媒体查询 + JS 同步状态
Bootstrap 不提供“大屏常驻、小屏抽屉”一键切换，offcanvas 默认只在小屏生效，强行加 show 类会让 backdrop 和动画失效。
- 给容器同时加
offcanvas offcanvas-start和自定义类如offcanvas-desktop - CSS 媒体查询中覆盖：对
.offcanvas-desktop设position: static; display: block !important; width: 320px; - 用
window.matchMedia("(min-width: 992px)").matches监听断点，在切换时调用instance.show()或instance.hide() - 大屏下务必加
data-bs-backdrop="false" data-bs-keyboard="false"，否则按 ESC 会误关常驻栏
内容滚动时关闭按钮被遮挡？检查父容器的 overflow 和 z-index
常见现象：通知栏内容多、启用滚动后，右上角 .btn-close 被裁剪或点击无响应，尤其在 iOS Safari 上。
- 关闭按钮必须放在
offcanvas-header内，且该 header 不能设overflow: hidden或position: relative - 如果非要在 body 里放浮动关闭按钮，用
position: sticky; top: 0; z-index: 1050;，并确保其父容器有position: relative - 用 DevTools 查
computed z-index，确认没被navbar或其他组件的z-index: 1000盖住 - 别给
offcanvas-body加height: 100%—— 它会撑满父容器，导致滚动区域计算异常
最易忽略的点：每次重新打开前，hidden.bs.offcanvas 里没重置表单或清空定时器，会导致状态残留；而 show.bs.offcanvas 里重复绑定事件，会让监听器越积越多。这两个时机的清理动作，没法靠 HTML 属性自动完成，必须手动写。
