col-auto + col 是唯一稳解：左侧由内容撑开或设固定宽，右侧自动填满剩余空间；必须同属一个row，不可单独使用，且需注意IE11兼容性及sticky侧边栏的高度约束与嵌套row规范。
用 col-auto + col 是最稳的栅格解法
bootstrap 5 没有 col-fixed 这类类名，但 col-auto + col 组合是语义正确、兼容性好、不依赖 calc() 的唯一栅格级稳解。它让左侧由内容自然撑宽（或加 min-width 锚定），右侧用 col 自动占满剩余空间。
-
col-auto必须和col（或col-*）在同一个row下配对使用，单独写col-auto无效 - 若需固定宽度（如 250px），直接给
col-auto元素加style="min-width: 250px; width: 250px;"，别只靠 class - 避免写成
col-3+col-9：那是按视口百分比分，不是“剩余空间”，侧边栏内容变高或加 padding 后，右侧容易错位或溢出 - IE11 不支持
col-auto，如需兼容，得降级到 Bootstrap 4 栅格，或改用d-flex方案
用 d-flex + flex-grow-0/flex-grow-1 更可控
当你要严格锁定左右像素值（比如左侧 200px、右侧永远 200px），栅格系统就力不从心了。d-flex 是绕过百分比逻辑、真正实现“固定+自适应”的底层方案。
- 父容器必须加
d-flex，否则flex-grow完全不生效 - 左侧加
flex-grow-0+style="min-width: 200px; width: 200px;"（min-width比w-25更可靠） - 右侧只加
flex-grow-1，它会吃掉所有剩余空间 - 三个子项必须同级、不能嵌套
row或container，否则 flex 分配逻辑被干扰 - 混用
col-*和flex-grow会导致行为不可控——两个系统在打架
左侧要 sticky 或 fixed？滚动行为必须显式约束
单纯加 position: sticky 或 position: fixed 不够。常见现象是：侧边栏内容一多，就把主区域顶下去；或者整个页面纵向滚动，而不是仅侧边栏内部滚动。
- 用
sticky时：col-auto外层不能设max-height（它不继承高度），必须嵌套一层div class="h-100 overflow-y-auto" -
h-100要生效，其父级（即col-auto）需有明确高度来源，比如所在row加了min-vh-100，或外层容器设了height: 100vh - 用
fixed时：左侧必须设top、left、height: 100vh（不能只用100%），右侧用margin-left避让，值要严格等于左侧宽度 - 如果页面有
.navbar，fixed左侧默认从视口顶部开始，会重叠——得手动加top: 56px偏移
移动端响应式收起侧边栏别硬塞 d-none
小屏下硬留一个 250px 宽的固定侧边栏，体验极差。但直接删 DOM 或乱加 d-none 又容易破坏 JS 初始化或组件状态。
- 给左右栏加
d-none d-lg-flex，注意d-none必须写在前面，否则在某些 Bootstrap 版本中会被后面的d-lg-flex覆盖 - 更稳妥的是用
offcanvas替代：把侧边栏内容放进<div class="offcanvas">，触发按钮放在.navbar内，逻辑清晰且无障碍友好 - 别在媒体查询里只改
position，还要同步处理margin-left、width、overflow等，否则滚动区可能突然塌陷或错位
