Bootstrap原生无固定像素+自适应专用类，唯一稳解是col-auto+col组合：左侧用col-auto加width/min-width控制固定宽，右侧用col自动填满剩余空间，须同属一个row且父容器为flex布局。
Bootstrap 4/5 中用 col- 类实现左/右固定宽 + 中间自适应
直接结论：Bootstrap 原生不提供“某列固定像素宽、其余列自动撑满”的类，但可以用 col- 配合 flex-grow-1 或 w-100 + ms-auto/me-auto 组合达成，关键在避免用 col-* 等分逻辑覆盖你的真实意图。
典型场景是侧边栏（如 250px 宽）+ 主内容区（剩余全部宽度），且希望主内容区随窗口缩放实时伸缩，不是靠 col-9 这类预设栅格数硬切。
- 固定侧栏不要写
col-2—— 它按 12 栅格比例算，不是像素固定；应改用col-auto+ 内联width: 250px或 class 封装 - 主内容区必须加
flex-grow-1（Bootstrap 5）或flex-grow-1+min-width-0（防文字溢出），否则它不会主动占满剩余空间 - 若用 Bootstrap 4，
flex-grow-1仍可用，但需确认父容器是d-flex且无flex-wrap干扰
用 col-auto + flex-grow-1 的最小可行结构
这是最稳定、兼容性好、语义清晰的做法。注意：父容器必须是 row 且为 flex 容器（Bootstrap 默认就是）。
<div class="row g-0"> <div class="col-auto p-3" style="width: 250px;">固定侧栏</div> <div class="col p-3 flex-grow-1">这栏会自适应剩余宽度</div> </div>
说明：
-
col-auto让该列宽度由内容或内联样式决定，不受栅格比例约束 -
col（无数字后缀）等价于flex: 1 1 0%，配合flex-grow-1可强化伸缩行为（尤其在内容少时） -
g-0是为了消除列间距干扰视觉对齐，按需保留 - 如果主内容里嵌套了表格或长单词，记得加
overflow-wrap: break-word或text-break类
为什么不用 col-2 col-10 或 col-md-3 col-md-9？
因为它们本质是「比例分配」，不是「固定 + 自适应」。比如 col-md-3 在 1200px 屏幕下约 280px，但到 1920px 就变成 450px —— 宽度会变，不符合“固定”要求。
常见错误现象：
- 侧栏在大屏下越来越宽，挤压主内容显示区域
- 小屏下
col-2太窄，文字换行混乱，又不敢调成col-3（怕大屏过宽） - 响应式断点切换时，左右宽度跳变，UI 不稳定
所以，真要固定像素宽，就别依赖 col-*-n 的栅格数逻辑，老实用 col-auto + 显式宽度控制。
响应式场景下如何让固定栏在小屏收起？
固定宽度只在中大屏有意义。移动端通常需要隐藏侧栏、用汉堡菜单触发。这时不能只靠 col-auto，得结合显示控制类：
- 给侧栏加
col-auto d-md-block d-none，让它仅在md及以上显示 - 主内容区保持
col或col-12 col-md，确保小屏下独占整行 - 如果用 offcanvas（Bootstrap 5.2+），侧栏可抽离为
offcanvas-start，主内容区加ms-md-250（对应侧栏宽）来预留空间
注意：ms-md-250 是 margin-left，单位是 rem，默认 1rem=16px，所以 250px 要写成 ms-md-15-625（250÷16≈15.625）—— 实际更推荐自定义 CSS 变量或用 style="margin-left: 250px" 避免计算误差。
真正难的不是写出来，而是想清楚“固定”到底指什么：是纯像素？是相对于视口的 vw？还是最大不超过某个值？这些决策会直接影响 class 组合和是否需要额外 CSS。
