应使用flexbox而非栅格系统：父容器加d-flex，左右栏用flex-shrink-0+内联width固定宽度（如200px、160px），中间栏用flex-grow-1自适应，三者同级不嵌套col类，避免语义冲突。
左右两栏固定宽度，中间用 flex 自适应
Bootstrap 5 默认不提供“左右固定 + 中间自适应”的栅格模式，原生 col-* 都是等比或响应式分配，硬设 col-2 + col-8 + col-2 在缩放时会破坏固定需求。真要固定左右（比如 200px 左侧导航、160px 右侧工具栏），中间撑满剩余空间，得绕过栅格，用 Flexbox 手动控制。
核心思路：容器设 display: flex，左栏 flex: 0 0 200px，右栏 flex: 0 0 160px，中间用 flex: 1 占据剩余所有空间。
实操建议：
- 不要嵌套在
.row/.col里，直接用自定义 class 包裹三块区域 - 给容器加
min-height: 100vh防止内容少时高度塌陷 - 左右栏若含滚动内容，需额外加
overflow-y: auto和max-height - Bootstrap 5 的
.d-flex工具类可复用，但别混用.col—— 它们语义冲突
避免 col- 类与 flex 混用导致宽度错乱
常见错误是给左栏加 col-2 同时又设 width: 200px，结果 col-2 的 flex: 0 0 16.666667% 会和显式 width 冲突，浏览器按 flex 基线计算，实际宽度可能不是 200px，尤其在小屏下被强制压缩。
正确做法是彻底放弃 col- 类控制左右栏，只用：
<div class="d-flex h-100"> 作为外层容器<li> <code><aside class="flex-shrink-0" style="width: 200px;"></aside>左栏-
<main class="flex-grow-1"></main>中间栏（无需 width） -
<aside class="flex-shrink-0" style="width: 160px;"></aside>右栏 - 桌面端：左 → 中 → 右，用
flex-row - 移动端：把左右栏挪到顶部或底部，用
flex-column+order-*重排 - 例如右栏在小屏时移到最上方：
order-md-last order-1 - 或者统一收进 offcanvas，用
data-bs-toggle="offcanvas"触发，比纯 CSS 更可控 - 绝对定位元素脱离文档流，父容器高度无法自动包裹它们
- 中间内容若高度不足，左右栏会重叠或悬空
- 滚动行为异常：左右栏不会随中间内容一起滚动，除非单独加
overflow，但同步滚动难实现 - 与 Bootstrap 的间距工具类（如
mx-3）冲突，margin 计算失效
注意：flex-shrink-0 是 Bootstrap 5 提供的工具类，防止内容多时被压缩；flex-grow-1 确保中间栏吃掉所有空闲空间。
响应式断点下如何让左右栏收起？
固定宽度在移动端显然不合适。别用 display: none 粗暴隐藏，否则 DOM 还在、JS 逻辑易出错。推荐用 Bootstrap 的显示工具类配合 flex order 控制视觉流：
关键点：左右栏的 width 内联样式必须配合 @media 覆盖，否则小屏下仍占 200px 空间，挤垮布局。
为什么不用 position: absolute？
有人试过给左右栏设 position: absolute，中间用 margin-left/right 撑开 —— 表面可行，但问题明显：
Flex 方案天然支持对齐、换行、收缩，且能响应内容高度变化。只要中间栏有内容，整个布局就稳。
真正容易被忽略的是：左右栏如果含 sticky 元素（比如固定标题），得确保其父容器有 position: -webkit-sticky 或显式 position: relative，否则 top 值无效。这个细节在 flex 容器里比普通流式布局更隐蔽。
