col-auto + col 是唯一稳解：左侧由内容撑开或设固定宽，右侧自动填满剩余空间；必须同属一个row，不可单独使用，且需注意IE11兼容性及sticky侧边栏的高度约束与嵌套row规范。
col-auto + col 组合是唯一稳解
Bootstrap 5 的栅格系统里，没有“左列固定宽度、右列填满剩余空间”的专用类，但 col-auto + col 是语义正确且浏览器兼容性最好的组合。它不依赖 calc() 或 flex-basis 手动计算，而是让 Bootstrap 的 flex 布局自动分配：左侧由内容撑开（或用 min-width/width 控制），右侧用 col 占据所有剩余空间。
常见错误是写成 col-3 + col-9——这看似等效，但实际是按视口百分比划分，不是“剩余空间”，一旦侧边栏内容变高或加 padding，右侧容易错位或溢出。
-
col-auto必须和col（或col-*）在同一个row下配对使用，单独写col-auto无效 - 若需固定侧边栏宽度（如 250px），直接给
col-auto元素加style="min-width: 250px; width: 250px;"，不要只靠 class - IE11 不支持
col-auto，如需兼容，降级用 Bootstrap 4 栅格或改用d-flex+flex-shrink-0+flex-grow-1
sticky 侧边栏必须配合 max-height 和 overflow-y:auto
后台布局中，侧边栏常需固定定位（position: sticky），但仅设 top: 0 不够——如果内容超长，会把主区域顶下去或导致整页滚动。真正起作用的是三要素：高度限制 + 内部滚动 + 容器约束。
典型结构是：col-auto 包裹一个 div class="sidebar p-3"，再在里面套一层 div class="h-100 overflow-y-auto"。否则滚动行为会作用在整个页面上，而不是侧边栏内部。
- 别在
col-auto上直接设max-height，它不继承父容器高度；必须用嵌套的 div 显式定义高度上下文 -
h-100要生效，其父级（即col-auto）需有明确高度来源，比如所在row设置了min-vh-100或包裹它的容器有height: 100vh - 移动端慎用
position: sticky，部分 Android WebView 支持不稳定；可用offcanvas替代，配合d-none d-lg-block
嵌套两栏时 row 层级不能省
如果主内容区（col）里还要再分左右两栏（比如模块区+日程区），必须显式加一层新的 row。Bootstrap 的栅格逻辑依赖 row 重置负外边距（margin: 0 -15px）并触发 flex 布局，跳过它会导致子列错位、左右留白异常或宽度计算失效。
错误写法：<div class="col"><div class="col-8">...</div><div class="col-4">...</div></div> —— 这两个 col-8/col-4 没有共同 row 父级，padding 和 margin 会叠加错乱。
- 正确结构必须是：
<div class="col"><div class="row"><div class="col-8">...</div><div class="col-4">...</div></div></div> - 嵌套
row内的列宽之和应为 12（如col-8+col-4），不能是col-6+col-6后还剩空白，否则视觉对齐会偏移 - 卡片类组件建议统一加
h-100和d-flex flex-column，避免因内容高度不一导致网格塌陷
container-fluid 是后台布局的起点
后台管理界面通常需要铺满整个视口，不用居中留白，所以第一层容器必须是 container-fluid，而不是 container。后者在 lg 断点下最大宽度只有 1140px，左右各带 15px padding，会制造意外留白，且无法随窗口缩放。
另一个高频陷阱是嵌套 container：比如在 col 里又套一个 container。这不仅多余，还会引入额外 padding，破坏侧边栏与主内容的宽度比例关系。
-
container-fluid下直接跟row，中间不要插任何其他 div（尤其不要container） - 如果需要响应式断点控制（如仅在 lg+ 显示侧边栏），用
d-none d-lg-flex控制col-auto，而不是切 container 类型 - 全局字体、间距等基础样式建议在
body或顶层容器上统一设，避免每层col都重复写p-3、mt-2等工具类
col-auto 元素本身没设宽度锚点（比如 min-width 或 width），导致它在内容为空或极简时塌缩成一条线——此时右侧 col 会直接顶到左边界，整个布局就失效了。 
