改侧边栏宽度后内容重叠，是因为未同步调整主内容区留白、盒模型或定位上下文；常见错误包括只改侧边栏尺寸却忽略其布局角色、fixed定位缺四要素、flex/grid未同步更新、移动端未回退、offcanvas误用width而不用--bs-offcanvas-width变量。
Bootstrap 5 侧边栏宽度改完后内容重叠，不是 CSS 没生效，而是你动了宽度却没同步处理主内容区的留白、盒模型或定位上下文——三者缺一就会导致右侧文字从侧边栏底下穿过去，或者侧边栏自身塌缩、错位、滚动失效。
为什么改了 width 或 flex-basis 还是重叠
常见错误是只改侧边栏容器的尺寸，却忽略它在整体布局中的角色。比如：
- 直接给
.col-md-3加width: 280px：它作为 flex 子项，脱离栅格约束后宽度归零，位置塌缩到左上角 - 用
flex: 0 0 280px却漏掉min-width: 280px：小屏下 flex-basis 可能被压缩，尤其当父容器宽度不足时 - 改了侧边栏宽度，但右侧
.main-content还用flex: 1—— 它不会自动“感知”左侧变宽，结果被挤窄甚至溢出
position: fixed 侧边栏必须补全四要素
固定定位最易出重叠，因为它完全脱离文档流。只加 position: fixed 不够，下面四个值必须显式声明且互相匹配：
-
top: 0; left: 0;（或top-0 start-0）：锚定起始位置，否则默认偏移不可控 -
width: 280px;（不能用100%，会塌陷；推荐w-25+min-width: 280px） -
height: 100vh;（100%在 fixed 下无效，必须用视口单位） - 右侧主内容区加
margin-left: 280px;（值必须等于侧边栏**实际渲染宽度**，含 padding/border）
漏掉任意一项，都会表现为内容重叠、侧边栏消失、或右侧文字被遮挡。
Flex/Grid 布局下必须同步调整主内容区
现代 Bootstrap 项目多用 display: flex 或 display: grid 实现两栏，只调侧边栏宽度不碰主内容区，几乎必然重叠：
- 若结构是
.container { display: flex; }+.sidebar { flex: 0 0 240px; }+.main-content { flex: 1; }，则侧边栏改为flex: 0 0 280px后，.main-content的flex: 1仍有效，但需确认其父容器未设max-width或overflow-x: hidden导致撑不开 - 如果用了
grid-template-columns: 240px 1fr;，宽度变更必须同步改第一列值，否则网格轨道错位，内容溢出 - 移动端断点（如
@media (max-width: 768px)）下，务必把侧边栏设为position: static并display: none，同时清除右栏的margin-left，否则小屏下仍强行留白造成横向滚动
Offcanvas 宽度改错会引发动画跳动+遮罩错位
Offcanvas 不是靠 width 控制宽度，硬写会破坏动画逻辑，尤其在 Safari 下表现明显：
- 必须用 CSS 变量：
--bs-offcanvas-width: 280px;，写在.offcanvas元素上（如style="--bs-offcanvas-width: 280px;"或类中定义） - 禁用
width、max-width、min-width—— 它们会干扰 offcanvas JS 对尺寸的读取和过渡计算 - 变量值避免用百分比（如
80%），它基于视口而非触发上下文，移动端易异常；推荐px、rem或vw - 关闭按钮必须含
data-bs-dismiss="offcanvas"，仅靠aria-label或onclick无法触发销毁逻辑，残留 DOM 会遮挡后续内容
重叠问题往往不是单一样式错误，而是宽度、定位、留白、响应式回退这四层没对齐。调试时优先检查右侧内容区的 margin-left 是否与侧边栏真实宽度一致，再往上查定位方式和盒模型设置。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
