不能直接用col-*类实现左侧固定右侧自适应，因其基于百分比缩放（如col-2在lg下从200px缩至165px），违背固定像素要求；必须用d-flex容器+flex-shrink-0+显式width控制左侧+flex-grow-1控制右侧。
直接用 col-3 和 col-9 不行，因为它们是比例制，不是固定+弹性混合；真正能稳住“左侧 240px、右侧自动填满”的组合，必须脱离栅格类，改用 d-flex + 显式宽度 + flex-grow-1。
为什么 col-* 类无法实现固定+弹性混合
Bootstrap 的 col-* 类本质是 flex: 0 0 X%，所有列都按百分比切分，没有“一个写死像素、另一个吃剩余空间”的机制。比如 col-2 col-10 在 1400px 宽度下左栏约 233px，但窗口缩到 992px 就只剩 ~165px——它根本不是固定，只是比例缩放。混用 col-2 和 flex-grow-1 更危险：两个布局引擎（栅格 vs Flex）同时作用，结果往往是左侧塌缩、右侧错位或换行。
d-flex 下左右同级子项的正确写法
父容器加 d-flex，左右子项必须平级、不嵌套 row 或 container：
- 左侧固定宽元素加
flex-shrink-0+style="width: 240px"（flex-shrink-0防止小屏压缩，仅靠width不够） - 右侧弹性区只加
flex-grow-1，不设width、不加col-*类 - 避免给右侧加
min-width或max-width，否则会干扰flex-grow分配逻辑 - 若需响应式隐藏左侧，在左侧元素上写
d-none d-lg-flex，且d-none必须在前
示例结构：
<div class="d-flex"> <div class="flex-shrink-0" style="width: 240px;">侧边栏</div> <div class="flex-grow-1">主内容区</div> </div>
移动端适配与常见塌陷原因
右侧内容区不撑高、文字从左侧底下穿过，通常是因为：
- 父容器没设
min-vh-100或height: 100vh，导致flex-grow-1缺少参考高度 - 左侧用了
position: fixed却没手动给右侧留margin-left: 240px（flex-grow-1不会自动避让 fixed 元素） - 右侧内部有
overflow-y: auto但没约束高度，得加min-height: 0或height: calc(100vh - 60px)才能触发滚动 - IE11 不支持
flex-grow，若必须兼容，改用 CSS Grid：display: grid; grid-template-columns: 240px 1fr;
真正容易被忽略的是：固定宽侧栏一旦用了 position: fixed，它就和 flex-grow-1 彻底解耦——此时右侧不再“感知”它的存在，所有避让都得靠手动 margin 或 padding 补足，而不是指望 flex 自动计算。
