侧边栏遮挡主体内容需手动腾空间：为主容器设 left padding 补偿其渲染宽度（如 260px），配合响应式重置；sticky 失效需检查父容器 overflow 和 flex 布局；锚点跳转遮挡用 scroll-margin-left；modal 跳动应启用 is-fixed 类或 static 背景。
侧边导航栏遮挡主体内容，不是类名写错了，而是它用了 position: fixed 或 position: sticky 后脱离文档流——主体内容没被“推着走”，得手动腾空间。
给主体容器加 left padding 补偿固定侧边栏宽度
Bootstrap 本身不为 .sidebar 或自定义侧边栏提供自动占位逻辑。最稳做法是：在紧接侧边栏之后的主内容容器（比如 <main>、<div class="content">）上加内边距，而不是改 <body>。
- 先用浏览器 DevTools 查看侧边栏真实宽度：
document.querySelector('.sidebar').offsetWidth（注意：别信 CSS 里写的width，要看渲染后值） - 若结果是
260px，就在主容器上加ps-5（≈ 100px）、ps-xxl-4（≈ 240px），或直接写style="padding-left: 260px;" - 避免同时用
ms-*和ps-*，外边距可能合并失效；也别只给<main>加，若它前面还有未设样式的<section>，照样被盖 - 响应式下侧边栏可能收起（如移动端隐藏），需配合媒体查询重置：
@media (max-width: 992px) { .content { padding-left: 0; } }
sticky 侧边栏失效时检查父容器 overflow
sticky 不是 fixed 的平替，它依赖滚动上下文。一旦父容器设置了 overflow: hidden、overflow: auto 或 overflow: scroll，sticky 就会被截断在该容器内，无法撑开主体区域。
- 常见陷阱：整个页面包在
<div class="layout-wrapper">里，而该容器没设min-height: 100vh或overflow-y: auto - Flex 布局中，若父容器是
display: flex但没设flex-direction: column+min-height: 100vh，sticky在 Safari 下大概率不生效 - 验证方式：临时给父容器加
outline: 1px solid red，看 sticky 元素是否“卡”在它的边界内
锚点跳转后标题被侧边栏遮住
点击 #about 链接后，<h2 id="about"> 顶部对齐视口左上角，但左侧已被 fixed/sticky 侧边栏占据——这不是主体内容错位，是滚动定位基准没避开侧边栏。
- 首选方案：用
scroll-margin-left直接作用于目标元素自身，例如：h2[id] { scroll-margin-left: 260px; } - 值必须和当前生效的侧边栏宽度一致；建议用 CSS 自定义属性统一管理：
:root { --sidebar-width: 260px; }，再写scroll-margin-left: var(--sidebar-width); - 响应式切换时需覆盖：
@media (max-width: 992px) { h2[id] { scroll-margin-left: 0; } } - 注意：
scroll-margin-left只对带id或name的锚点元素本身有效，写在<body>或<main>上无效
modal 弹出时侧边栏视觉跳动
Bootstrap 5 打开 modal 会自动给 <body> 加 modal-open 类，并注入 padding-right 补偿滚动条消失的空间。但 fixed/sticky 侧边栏没同步这个偏移，导致它相对视口“右移”。
- 官方解法：给侧边栏同时加
is-fixed类（注意无连字符），Bootstrap 内部会监听modal-open并同步padding-right - 若不用该机制，可加
data-bs-backdrop="static"到 modal 标签，跳过modal-open注入——但也会禁用点击遮罩关闭 - 切勿手动覆盖
body.modal-open { padding-right: 0 !important }，否则所有 fixed 元素（包括顶部导航）都会失对齐
真正难的不是写哪行代码，而是每次改完侧边栏样式（比如加 logo、调 font-size、换 padding）后，都得重新测 offsetWidth —— 浏览器里按 F12 看一眼，比猜类名靠谱得多。
