左右分栏用container-fluid+row+col-即可，关键禁用gutters、设高度约束并避免transform干扰sticky定位。
左右分栏结构用 container-fluid + row + col- 就够了
Bootstrap 5 的栅格系统本身不区分“后台”或“前台”，左右分栏就是标准的两列流式布局。关键不是加什么特殊类，而是避免用 container（它带固定宽度和水平居中），改用 container-fluid 撑满视口，再用 row 和 col- 控制比例。
常见错误是直接套用文档里的响应式示例，结果左侧菜单被压缩、右侧内容留白严重——那是因为没禁用默认的 gutters 或没处理好高度撑满。
-
container-fluid必须作为最外层容器，否则左右栏会缩在中间 - 左侧栏推荐固定宽度（如
col-auto或col-2），右侧用col自适应剩余空间 - 加
g-0类关闭 row 的 gutter，否则左右栏之间有 1rem 间隙 - 如果要让右侧主内容区高度占满 viewport，需额外加
min-vh-100或自定义 CSS（Bootstrap 本身不提供“100vh 减去 header 高度”的内置类）
navbar 和 sidebar 别混用同一个组件逻辑
很多人把顶部导航栏（navbar）和左侧菜单（sidebar）都塞进 navbar 组件里，结果响应式折叠错乱、移动端双层遮挡。Sidebar 不是 Bootstrap 内置组件，得自己写结构，用 offcanvas 或纯 CSS 实现收放更可控。
典型结构应是：header 放顶部导航，main 包裹左右两栏，左侧用 nav + list-group 或语义化 aside，右侧放 section 或 article。
- 左侧菜单不要用
navbar-nav，它专为顶部/底部导航设计，垂直排列时 padding/margin 不匹配 - 想实现点击收缩，优先用 Bootstrap 5.3+ 的
offcanvas（配合data-bs-toggle="offcanvas"），比手写 JS 切换 class 更稳 - 如果用
col-2固定宽度，小屏下建议加d-none d-lg-block隐藏，再用 offcanvas 替代，而不是强行响应式缩成col-12
右侧内容区滚动失效？检查 overflow 和 height 层级
后台页面常见问题是右侧主内容不滚动，整个页面却拖到底部才动——这是因为父容器没设高度限制，浏览器不知道“哪里该出现滚动条”。Bootstrap 的 col 默认是 min-height: 0，但不会自动触发 overflow。
解决路径很直接：给右侧 col 加 overflow-y-auto，同时确保它的父级（row 或 main）有明确高度约束，比如 style="height: calc(100vh - 56px)"（减去 header 高度）。
- 别只加
overflow-y-auto，不设max-height或height，它不会生效 - 避免在
row上直接设height: 100vh，因为row是 flex 容器，子项col需要flex-shrink: 0才能正确响应 - 更稳妥的做法：给
main设style="height: calc(100vh - 56px); display: flex; flex-direction: column;"，右侧col外再包一层div class="flex-grow-1 overflow-y-auto"
用 sticky-top 固定左侧菜单时，小心 transform 干扰定位
想让左侧菜单随滚动始终可见，sticky-top 看似简单，但实际经常失灵。根本原因是：如果任意父元素设置了 transform、perspective 或 filter（比如某些动画库或卡片阴影 hack），就会创建新的 stacking context，导致 position: sticky 失效。
尤其注意 container-fluid 或 row 是否被其他 CSS 意外添加了 transform；另外 sticky-top 的生效依赖父容器有明确高度（不能是 min-height），且自身不能是 flex 子项中的 align-self: stretch 行为。
- 调试方法：临时给左侧
col加border: 1px solid red，看是否随滚动“跳回顶部”，跳了说明 sticky 被截断 - 替代方案：不用
sticky-top，改用position: fixed+ 左侧设width+ 右侧用margin-left避让，虽要手动算宽度，但 100% 可控 - 如果必须用 sticky，确保从
body到该元素之间所有祖先都没有transform类或内联样式
右侧内容区高度计算和 sticky 定位失效，是上线前最容易漏掉的两个点。它们不报错，但用户一滚动就立刻暴露。
