用 d-flex + flex-shrink-0 + flex-grow-1 实现左侧固定、右侧自适应拉伸：外层加 d-flex，左侧加 flex-shrink-0 并设 width（如 240px），右侧加 flex-grow-1；避免使用 col- 栅格，因其按百分比响应式缩放，无法真正固定像素宽度。
用 flex 类让左侧固定、右侧自适应拉伸
Bootstrap 5 默认基于 Flexbox，不需要额外写 CSS 就能实现「左固定 + 右拉伸」布局。关键不是靠 col- 栅格，而是用 d-flex + flex-shrink-0 + flex-grow-1 组合。
常见错误是直接套 col-2 col-10 —— 这在响应式下会断层，且无法真正“固定宽度”；而用 Flex 控制，左侧宽度可设为 width 或 min-width，右侧自动占满剩余空间，更可靠。
-
div外层加d-flex启用弹性容器 - 左侧元素加
flex-shrink-0防止被压缩，再用width（如width: 200px）或min-width固定尺寸 - 右侧元素加
flex-grow-1，它会吸收所有剩余空间 - 避免给右侧设
width或flex-basis，否则会干扰拉伸行为
为什么不用 col- 类？
col- 是栅格系统，本质是 flex-basis + max-width，它按百分比划分，不支持“左侧像素固定、右侧填满”的混合逻辑。一旦屏幕变窄，col-2 仍会缩放，达不到“真固定”效果。
典型误用现象：col-2 在小屏下塌缩成 100%，右侧也被顶下去——这不是弹性拉伸，是栅格换行。
- 栅格适合等比/响应式分栏，不适合“固定侧边栏 + 主内容区”场景
-
col-没有flex-shrink-0等控制收缩的工具类 - 若坚持用栅格，必须配合自定义 CSS 覆盖
flex行为，得不偿失
完整 HTML 结构示例
<div class="d-flex">
<aside class="flex-shrink-0" style="width: 240px;">
左侧导航
</aside><main class="flex-grow-1">
右侧主内容（自动拉伸）
</main>
</div>
注意：style="width: 240px" 是最简做法；也可抽成自定义 class，比如 .sidebar-fixed { width: 240px; }，便于复用。
如果需要响应式隐藏左侧（如移动端），加 d-none d-md-flex 到外层，并给 aside 加 d-md-block 即可，Flex 布局天然兼容 Bootstrap 的显示工具类。
容易忽略的细节：溢出与滚动
当右侧内容高度超长，又没设置容器高度时，flex-grow-1 不会触发滚动条——它只管水平拉伸。垂直方向需手动控制。
- 若希望右侧区域独立滚动，给
main加overflow-y-auto和固定min-height（如min-height: calc(100vh - 60px)） - 避免对
main设height: 100%，它依赖父级高度，而d-flex容器默认height: auto - 左侧若含长列表，也建议加
overflow-y-auto，防止撑高整个容器
真正的难点不在布局本身，而在后续交互中保持右侧滚动锚点、处理 resize 重绘、以及和第三方组件（如表格库、图表容器）的高度协同——这些没法靠几个 class 解决，得从容器高度继承链开始理清。
