bootstrap响应式侧边栏必须用col-md-3+col-md-9搭配offcanvas实现：桌面端固定窄栏（240–280px）靠栅格弹性控制，移动端用offcanvas从文档流移出以避免dom占位、无障碍失效和页面塌陷。
直接用 col-md-3 + col-md-9 搭配 offcanvas 就能实现接近 GitHub 个人主页的响应式侧边栏，但必须避开 DOM 占位、无障碍失效和页面塌陷这三类典型错误。
桌面端固定窄栏怎么设宽度才不破坏栅格弹性
GitHub 侧边栏在 ≥768px 屏幕上实际宽度约 240–280px，不是严格 25%。硬写 width: 250px 或 col-lg-2 会导致高 DPR 屏幕下显得过窄、文字挤出、头像错位。
- 用
col-md-3作为起点，它在 md 断点（≥768px）下占 25%，视觉上足够接近 - 外层加
.container并设max-width: 1200px+mx-auto，防止大屏无限拉宽 - 头像别写死尺寸：小屏用
h-10 w-10（Bootstrap 5.3+），大屏可配合h-12 w-12或自定义 class 动态缩放 - 侧边栏内部用
list-group组织信息项，删掉默认list-group-item的左右 padding，改用px-3控制密度
移动端为什么不能只用 d-none d-md-block
这种写法只是把元素设为 display: none，DOM 仍在文档流里——会导致主内容区高度被拉高、滚动异常、键盘焦点仍能进入、屏幕阅读器继续朗读，完全不符合 WCAG。
- 正确做法是用
offcanvas把侧边栏从文档流中临时移出，靠transform: translateX()推入视口 - 触发按钮必须放在主内容区顶部，带
data-bs-toggle="offcanvas"和data-bs-target="#profile-sidebar" -
offcanvas元素本身要放在.container-fluid同级或最末尾，别嵌套进.col里，否则定位错乱 - 关闭按钮必须是原生写法：
<button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>，手写 × 或 JS 移除 class 会丢键盘支持
offcanvas 怎么定制宽度又不破坏定位逻辑
给 offcanvas 加 width、float 或 position: relative 会直接冲突其 transform 定位机制，导致遮罩不显示、菜单卡在左上角、关闭按钮失灵。
- 宽度唯一安全方式：用 CSS 变量
style="--bs-offcanvas-width: 280px;" - 背景半透效果用
bg-body-tertiary，别用bg-dark再调opacity，否则遮罩层 z-index 被干扰 - 删掉所有自定义 class 如
sidebar，只保留offcanvas offcanvas-start - 内部链接若含二级菜单，需手动加
tabindex="0"，否则键盘用户无法聚焦展开
主内容区为什么一展开就塌陷或被盖住
现象：点开 offcanvas 后，主内容突然变矮、文字被遮、滚动条消失。这不是 JS 错误，而是 CSS 高度没兜住。
- 关键修复：给主内容容器（比如
div.col-md-9）加min-height: 100vh，且必须是内联 style 或直接写在该 div 上 - 不能只靠
height: 100%—— 它依赖父容器有明确高度，而.row默认是 content-fit - 别把
offcanvas放在.col内部，它需要 fixed 定位上下文，放错位置会导致 z-index 失效、遮罩不渲染 - 如果主内容本身需要独立滚动（如长列表），再额外加
overflow-y: auto和max-height: calc(100vh - 60px)（减去 navbar 高度）
真正难的不是写几行栅格，而是让侧边栏在桌面端“存在感刚好”、在移动端“彻底消失”，同时不牺牲可访问性或破坏滚动逻辑。offcanvas 不是锦上添花的动画组件，它是语义层面的 DOM 管理方案——这点容易被忽略。
