只能用--bs-offcanvas-width变量控制宽度，硬写width或max-width会破坏动画和遮罩；该变量必须设在.offcanvas元素自身且为<body>直接子元素，支持px/rem/vw单位，禁用百分比；图标模式需重置padding与居中逻辑，并约束.offcanvas-body滚动。
只能用 --bs-offcanvas-width 变量控制，硬写 width 或 max-width 会破坏动画、遮罩定位，尤其在 Safari 下抽屉滑入抖动或遮罩错位。
必须把 --bs-offcanvas-width 写在 .offcanvas 元素自身上
Bootstrap 的 JS 初始化逻辑只读取 .offcanvas 节点自身的该变量值，且该节点必须是 <body> 的直接子元素。父容器加无效，wrapper 上设也无效。
- ✅ 正确：
<div class="offcanvas offcanvas-start" style="--bs-offcanvas-width: 280px;"> - ✅ 正确（外部样式）：
.offcanvas-sidebar { --bs-offcanvas-width: 280px; }，且该类必须作用于.offcanvas元素本身 - ❌ 错误：把
.offcanvas套在<main>或<div class="container">里，再给外层加变量 - ❌ 错误：同时加
offcanvas-start和offcanvas-end—— 方向类冲突会导致变量被忽略
单位选 px、rem、vw，禁用百分比
百分比（如 80%）会基于视口计算，而非触发上下文，在移动端易导致宽度异常、遮罩偏移或抽屉卡半截。
- ✅ 推荐：
--bs-offcanvas-width: 280px（稳定）、--bs-offcanvas-width: 18rem（适配字体缩放）、--bs-offcanvas-width: 30vw（需谨慎测试多设备） - ❌ 禁用：
--bs-offcanvas-width: 80%—— 即使能显示，也会让 backdrop 插入位置错乱、ESC 关闭失效 - ⚠️ 注意：
vw在横屏 iPad 或折叠屏上可能超出预期，建议搭配媒体查询限制最大值
图标模式（80px 级别）必须重置内边距与居中逻辑
原生 list-group-item 或 nav-link 的 padding: 0.5rem 1rem 和 line-height: 1.6 在窄宽度下会导致图标上下空隙过大、点击区域偏小、视觉松散。
立即学习“前端免费学习笔记（深入）”；
- ✅ 必须覆盖：
.sidebar-icon-item { padding: 0.75rem 0; display: flex; align-items: center; justify-content: center; } - ✅ Font Awesome 图标加
fa-fw类，防宽度不一导致列表晃动 - ✅ 统一用
fs-4或font-size: 1.25rem控制大小，避免混用text-lg、h5导致高度不一致 - ❌ 别依赖
line-height居中——flex 更稳定，尤其在不同行高或图标渲染差异下
抽屉内容溢出时，.offcanvas-body 必须设滚动约束
不设 max-height 和 overflow-y: auto，会导致整个遮罩层被内容拉长，背景灰区远超屏幕范围，滚动时遮罩“跟着动”，体验断裂。
- ✅ 必须加：
<div class="offcanvas-body" style="max-height: calc(100vh - 56px); overflow-y: auto;">（56px是典型 navbar 高度，按实际调整） - ❌ 不要给外层
.offcanvas设height或max-height—— 会干扰 transform 定位基线，导致动画偏移 - ⚠️ 注意：如果用了固定顶部导航栏（
position: sticky或fixed），需动态计算calc(100vh - [navbar-height])，否则小屏下底部内容不可见
真正难的不是改宽度，而是确保 --bs-offcanvas-width 被 JS 正确读取、遮罩插入位置准确、滚动不破坏 backdrop 范围——这三个点任意一个出错，都会表现为“宽度改了但抽屉卡住”或“关不掉”。
