Offcanvas宽度只能用--bs-offcanvas-width变量修改，硬写width或max-width会破坏动画、遮罩定位和滚动逻辑，尤其在Safari下导致抖动或错位；必须设于.offcanvas元素自身，支持px/rem/vw单位，禁用百分比；图标模式需重置padding与居中；关闭按钮必须含data-bs-dismiss="offcanvas"；offcanvas必须为body直接子元素。
Offcanvas宽度只能用--bs-offcanvas-width变量改，别碰width或max-width
Bootstrap 5 的 offcanvas 宽度由 CSS 自定义属性 --bs-offcanvas-width 控制，硬写 width: 280px 或 max-width 会破坏动画、遮罩定位和滚动逻辑。尤其是 Safari 下，直接设 width 会导致滑入时抖动或遮罩错位。
正确做法是通过 style 属性或外部样式表覆盖变量：
<div class="offcanvas offcanvas-start" id="sidebar" style="--bs-offcanvas-width: 280px;">-
.offcanvas-sidebar { --bs-offcanvas-width: 280px; }—— 必须加在.offcanvas元素本身上，父容器或 wrapper 上无效 - 变量值支持
px、rem、vw，但避免用百分比（如80%），它会基于视口而非触发上下文，导致移动端异常 - 如果同时用了
offcanvas-start和offcanvas-end类（错误写法），变量会被忽略
图标模式侧边栏的padding和居中必须手动重置
默认 list-group-item 或 nav-link 是为文字设计的：padding: 0.5rem 1rem、line-height: 1.6，塞进小图标后上下空隙过大、视觉松散、点击区域偏小。
图标模式（比如宽度压到 80px）下，必须显式覆盖这些样式：
立即学习“前端免费学习笔记（深入）”；
-
.sidebar-icon-item { padding: 0.75rem 0; display: flex; align-items: center; justify-content: center; text-align: center; }—— 去掉line-height，用flex+align-items: center居中更稳定 - 如果用 Font Awesome，务必加
fa-fw类，否则不同图标宽度不一，列表会左右晃动 - 别用
text-lg或h5控制图标大小，混用会导致高度不一致；统一用fs-4（Bootstrap 5.3+）或font-size: 1.25rem
关闭按钮必须带data-bs-dismiss="offcanvas"，不是靠aria-label
很多开发者以为放个 <button aria-label="Close"></button> 就能关 offcanvas，结果点了没反应——关闭行为完全依赖 data-bs-dismiss="offcanvas" 这个触发器，JS 内部靠它识别并销毁实例。
- 该属性必须写在按钮上，且按钮需位于 offcanvas 内部（不能放在外部再 JS 绑定 click）
- 标准写法：
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button> - 若自定义文案，可用
<button>关闭</button>，但data-bs-dismiss="offcanvas"不能少 - 漏掉这个属性，用户只能靠 ESC 或 backdrop 点击关闭；若同时设了
data-bs-backdrop="false"，则彻底无法关闭
Offcanvas必须挂载在<body>直接子级，否则遮罩和 ESC 失效
这是最常被忽略的硬性约束：Bootstrap 5 的 offcanvas 组件依赖 document.body 做事件委托和遮罩层插入。如果把它写在某个 <div class="container"> 或 <main> 里，点击遮罩不关闭、ESC 失效、滚动错位等问题几乎必然出现。
- 错误写法：
<main><div class="offcanvas offcanvas-start"></div></main> - 正确写法：把整个
<div class="offcanvas">直接放在<body>最顶层，和<header>、<main>并列 - Vue/React 中注意：不要让组件渲染进局部容器（如 ref 挂载点），要用
Teleport（Vue）或createPortal（React）把 offcanvas 节点传到document.body - 漏掉
tabindex="-1"会导致键盘焦点无法进入抽屉，影响可访问性
