直接给 .col-md-3 加 position: fixed 不行，因其脱离文档流后失去 .row 的 flex 布局约束，导致宽度归零、位置塌缩至左上角，右侧内容穿透显示；正确做法是固定其内部容器（如 .sidebar-inner），并显式设置宽高、右侧留白及响应式回退。
为什么不能直接给 .col-md-3 加 position: fixed
加了之后侧边栏会缩成一条线卡在左上角，右侧内容直接从它底下穿过去。这不是样式没生效，而是 Bootstrap 的栅格系统（.row + .col）依赖 flex 布局计算宽度和位置，一旦脱离文档流，所有弹性行为就失效了。
真正该 fixed 的是侧边栏内部容器，比如：<div class="sidebar-inner">，然后显式设 width: 250px 和 height: 100vh。父级 .col-md-3 必须保留，否则断点类（如 md）就不起作用。
-
flex: 0 0 250px比width: 250px更可靠——它锁死不放大、不缩小、基准宽度为 250px - IE11 需同时写
width: 250px和flex-basis: 250px，否则 fallback 失效 - 右侧主内容区必须手动留白：
margin-left: 250px，不能用ms-md-3这类响应式工具类，数值不精确
小屏下用 offcanvas 而不是 d-none d-sm-block
d-none d-sm-block 只是视觉隐藏，DOM 仍占位：滚动异常、键盘焦点跳过、屏幕阅读器误读——这不是“看起来没显示”就完事了，是可访问性层面的硬伤。
正确做法是桌面端用 col-md-3 + col-md-9，移动端完全剥离 DOM 流，改用 offcanvas-start：
立即学习“前端免费学习笔记（深入）”；
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 侧边栏容器加
class="offcanvas offcanvas-start"和id="sidebar" - 触发按钮必须是
<button type="button" data-bs-dismiss="offcanvas">，手写onclick会丢掉 ESC 关闭和 ARIA 支持 - 主内容区外层包一层
<div class="offcanvas-body">，别直接套在<main>上 - 主内容区建议加
style="min-height: 100vh;"，否则 offcanvas 展开后可能塌陷留白
:checked 在小屏下点了没反应？检查选择器层级
:checked 只能通过 +（相邻兄弟）或 ~（通用兄弟）影响后续同级元素，无法跨层、不能向上找。常见错误是把 <input id="sidebar-toggle"> 和 <div class="sidebar"> 放在不同父容器里，中间还隔了其他标签。
-
<input>必须和侧边栏在同一父级下，且<input>在前 - 别写
input { display: none; }——旧版 Safari 会丢掉状态变化；改用position: absolute; opacity: 0; pointer-events: none; - 选择器必须是
#sidebar-toggle:checked ~ .sidebar，不能写成.sidebar:has(#sidebar-toggle:checked)（:has()不支持此场景） -
<label for="sidebar-toggle">的for值必须严格匹配input的id，否则点击不触发
收缩后主内容区撑不满？关键在 flex 的第三个参数
不是没写 flex: 1，而是默认 flex-basis 是 auto，浏览器按内容宽度起始计算，导致弹性分配失准。
主内容区要写 flex: 1 1 0，其中末尾的 0 是关键：它表示“不按内容宽度起始”，强制从 0 开始分配剩余空间。
- 侧边栏加
flex-shrink: 0防止被压缩过度 - 如果侧边栏用了
width: 250px，小屏下改用flex-basis: var(--sidebar-width, 0); min-width: 0; overflow: hidden;，比直接width: 0更利于动画和可访问性 - 避免用
max-width媒体查询来隐藏侧边栏——容易和 JS 类名冲突；优先用@media (min-width: 768px)主动启用
最易忽略的是右侧内容区的高度约束：加了 overflow-y: auto 却没滚动条，大概率是因为没设 min-height: 0 或 height: calc(100vh - 60px)，浏览器不知道“多高才算溢出”。
