直接给 .col-md-3 加 position: fixed 不行，因其脱离文档流后失去 .row 的 flex 布局约束，导致宽度归零、位置塌缩至左上角，右侧内容穿透显示；正确做法是固定其内部容器（如 .sidebar-inner），并显式设置宽高、右侧留白及响应式回退。
为什么不能直接给 .col-md-3 加 position: fixed
加了之后侧边栏会缩成一条线卡在左上角，右侧内容直接从它底下穿过去。这不是样式没生效，而是 Bootstrap 的栅格系统（.row + .col）依赖 flex 布局计算宽度和位置，一旦脱离文档流，所有弹性行为就失效了。
真正该 fixed 的是侧边栏内部容器，比如： 正确做法是桌面端用 不是没写 主内容区要写 最易忽略的是右侧内容区的高度约束：加了 width: 250px 和 height: 100vh。父级 .col-md-3 必须保留，否则断点类（如 md）就不起作用。
flex: 0 0 250px 比 width: 250px 更可靠——它锁死不放大、不缩小、基准宽度为 250pxwidth: 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：
class="offcanvas offcanvas-start" 和 id="sidebar"
，手写 onclick 会丢掉 ESC 关闭和 ARIA 支持 上style="min-height: 100vh;"，否则 offcanvas 展开后可能塌陷留白
:checked 在小屏下点了没反应？检查选择器层级:checked 只能通过 +（相邻兄弟）或 ~（通用兄弟）影响后续同级元素，无法跨层、不能向上找。常见错误是把 和
必须和侧边栏在同一父级下，且 在前input { display: none; }——旧版 Safari 会丢掉状态变化；改用 position: absolute; opacity: 0; pointer-events: none;
#sidebar-toggle:checked ~ .sidebar，不能写成 .sidebar:has(#sidebar-toggle:checked)（:has() 不支持此场景） 的 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)，浏览器不知道“多高才算溢出”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
