如何在Bootstrap 5中通过CSS修改Offcanvas抽屉宽度？-css教程-PHP中文网

必须使用--bs-offcanvas-width变量设置offcanvas宽度，仅作用于.offcanvas元素本身且需为body直接子元素，禁用百分比单位；图标模式下需重置padding、居中及图标样式；关闭按钮须含data-bs-dismiss="offcanvas"且位于内部。

如何在bootstrap 5中通过css修改offcanvas抽屉宽度？

必须用`--bs-offcanvas-width`变量，别碰`width`或`max-width`

直接写width: 280px或max-width: 300px会破坏动画、遮罩定位和滚动逻辑，尤其在 Safari 下出现滑入抖动或遮罩错位。Bootstrap 5 的 offcanvas 宽度完全由 CSS 自定义属性--bs-offcanvas-width控制，JS 动画和 backdrop 插入都依赖这个值做计算。

实操建议：

只在.offcanvas元素自身上设置该变量，父容器或 wrapper 上加无效
支持px、rem、vw单位，禁用百分比（如80%），它会基于视口而非触发上下文，移动端易异常
写法示例：<div class="offcanvas offcanvas-start" style="--bs-offcanvas-width: 280px;"> 或外部样式：<code>.offcanvas-sidebar { --bs-offcanvas-width: 280px; }
同时加offcanvas-start和offcanvas-end类会导致变量被忽略

`--bs-offcanvas-width`必须设在`.offcanvas`元素本身

很多人把 offcanvas 套在<main></main>或<div class="container">里，再给外层 wrapper 加变量——这完全没用。JS 初始化时只读取<code>.offcanvas节点上的--bs-offcanvas-width，且该节点必须是的直接子元素，否则 backdrop 插入位置错乱、动画基线偏移。

常见错误现象：

宽度改了，但抽屉滑出一半卡住，或遮罩只盖住左半屏
控制台报Cannot read properties of null，大概率是document.getElementById()没拿到目标元素（ID 不匹配或 DOM 未就绪）
Vue/React 中没用Teleport或createPortal挂到document.body，导致 ESC 失效、滚动锁未释放

图标模式（窄宽度）下需重置`padding`与居中逻辑

当把--bs-offcanvas-width压到80px这类图标模式时，原生的list-group-item或nav-link样式会严重不匹配：默认padding: 0.5rem 1rem和line-height: 1.6让小图标上下空隙过大、点击区域偏小、视觉松散。

Canvas 内容工厂（网格生成→多页 PDF→SVG 精准复刻）

用户要生成可打印的中文字帖/练习纸、导出多页 A4 PDF 报告，或把 SVG 设计稿零误差还原到 Canvas 时使用。本技能是「Canvas 内容工厂闭环」的总控，编排：网格渲染引擎(13 种教育网格+拼音标注) → 多页 PDF 导出(A4 合成) → SVG 精准复刻(坐标误差<0.001px)。触发词：生成字帖、练习纸、导出 PDF、SVG 转 Canvas、印刷级还原、A4 报告、米字格田字格。

下载

必须手动覆盖：