用Bootstrap 5栅格搭两栏后台布局需用container-fluid+row+col-auto（侧边栏）+col（主内容），设sticky定位与max-height/overflow-y:auto确保滚动，避免嵌套container和固定列宽，移动端用d-none/d-lg-block配合offcanvas。
怎么用 Bootstrap 5 的栅格系统快速搭出两栏后台布局
直接用 container-fluid + row + 两个 col 就能跑起来，但真要稳，得盯住“侧边栏是否固定”和“主内容是否自适应滚动”这两个点。默认栅格是流式的，不加控制，侧边栏一高，右边就会被顶下去或者撑开整页。
- 左侧固定宽度（比如
250px），右侧自动占满剩余空间：用col-auto+col组合，而不是均分col-3 col-9 - 侧边栏需要常驻、不随主内容滚动？给它加
position: sticky; top: 0;，同时确保父容器有overflow: visible（否则 sticky 失效） - 主内容区要滚动？必须显式设
max-height和overflow-y: auto，仅靠vh不可靠——顶部导航栏高度变化时会错位
为什么 col-2 + col-10 在后台里经常“看起来不对”
因为后台页面通常有顶部导航栏（navbar）、左侧菜单（可能带折叠/展开）、还有 footer，而 Bootstrap 栅格默认按视口宽度算列宽，没考虑这些“非栅格元素”的实际占用。结果就是右侧内容被压缩、文字换行异常，或侧边栏在小屏下突然塌陷。
- 避免用固定数字列（如
col-2）做侧边栏，改用col-auto让宽度由内容撑开，更可控 - 如果必须定宽，用
col-xxl-2这类断点类名，防止在 iPad 或小笔记本上错乱 - 检查是否意外套了多层
container—— 嵌套会导致内边距叠加，视觉上“变窄”
offcanvas 和 sidebar 在移动端怎么不打架
Bootstrap 5 没内置 sidebar 组件，很多人把 offcanvas 当侧边栏用，结果在桌面端也弹出遮罩、点击空白收不回去，或者 JS 初始化逻辑冲突。
- 桌面端显示常驻侧边栏，移动端才用
offcanvas：用class="d-none d-lg-block"控制常驻栏，再另写一个offcanvas块加class="d-lg-none" -
offcanvas的触发按钮必须带data-bs-target，且目标 ID 要和offcanvas的id完全一致，大小写敏感 - 别在同一个页面多次调用
new bootstrap.Offcanvas()，容易重复绑定事件，导致点一次关两次
用 flex-column 替代栅格做垂直布局时的兼容陷阱
有些后台需要顶部导航 + 左侧菜单 + 主内容三块纵向排列，这时有人直接给 body 加 d-flex flex-column，结果发现 col 类失效、高度计算异常，甚至 Chrome DevTools 显示“Layout Shift”警告。
-
flex-column容器里的子元素若没设flex-shrink: 0，浏览器会压缩它们来适配空间，侧边栏可能被压扁 - 主内容区想占满剩余高度？得给它加
flex-grow: 1，且父容器必须有明确高度（比如min-height: 100vh） - IE11 完全不支持
flex-grow，如果还要兼容，老老实实用position: absolute+top/bottom/left更稳
最麻烦的其实是 scrollbar 占位问题：Windows 默认显示滚动条，会挤占 17px 宽度，导致右侧内容忽隐忽现。要么统一用 overflow-y: overlay（仅 Webkit），要么在 CSS 里给右侧区域预留 17px 内边距补位。
