Bootstrap 容器实现左右固定宽度中间自适应容器-Bootstrap教程-PHP中文网

用 d-flex + flex-grow 实现三栏固定-自适应布局需父容器加 d-flex，左右列设 flex-grow-0 与显式宽度（如 width:200px），中间列用 flex-grow-1 自适应剩余空间，禁用 col-* 类避免 Flex 与栅格逻辑冲突。

用 d-flex + flex-grow 实现三栏固定-自适应布局

bootstrap 本身没有 col-fixed 这类原生类，所谓“左右固定、中间自适应”，本质是放弃栅格的百分比均分逻辑，改用 flex 布局控制伸缩行为。关键不是写 col-2 col-8 col-2，而是让左右列不伸缩、中间列吃掉所有剩余空间。

父容器必须加 d-flex，否则 flex-grow 完全不生效
左右列加 flex-grow-0 并显式设宽（如 w-25、style="width: 200px"），不能只靠 col-* 类
中间列用 flex-grow-1，它会填满父容器减去左右列后的全部宽度
严禁混用 col-* 和 flex-grow：前者走栅格计算，后者走 Flex 分配，冲突时以 Flex 为准但结果不可控

示例结构：

<div class="d-flex">
  <div class="flex-grow-0 w-25" style="width: 200px;">左侧</div>
  <div class="flex-grow-1">中间自适应</div>
  <div class="flex-grow-0 w-25" style="width: 200px;">右侧</div>
</div>

为什么 col-2 col-8 col-2 不满足“固定宽度”需求

col-2 在不同断点下对应的是百分比宽度（如 lg 下约 16.67%），不是像素固定值。窗口从 1200px 缩到 992px，col-2 就从 ~200px 缩到 ~165px——这和“始终 200px”的目标直接矛盾。

响应式栅格天生是流体的，col-* 类只为比例划分服务
如果你在 CSS 中覆盖了 width，又没禁用 flex 相关属性，可能触发浏览器 layout 重排异常
真要固定像素宽，必须脱离栅格宽度计算链，用 flex-grow-0 + 显式 width 或 min-width

container-fluid 的 padding 会干扰视觉“贴边”效果

Bootstrap 5 的 container-fluid 默认带 padding-left: 0.75rem 和 padding-right: 0.75rem（即 12px），导致内容看起来没真正撑满视口。这不是 bug，是设计选择。

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

直接清除内边距：.container-fluid { padding-left: 0 !important; padding-right: 0 !important; }
若只需移动端清除，加媒体查询：@media (max-width: 767.98px) { .container-fluid { padding: 0; } }
不要修改 CDN 引入的 Bootstrap CSS，用自定义样式覆盖更安全
注意：如果父级有 margin 或全局 reset 导致偏移，container-fluid 再怎么清 padding 也无效

嵌套 container 时居中失效的根源

把 container 放进 container-fluid 里，常出现不居中甚至错位——这不是框架问题，而是 container 的居中依赖 margin: 0 auto，而它的宽度仍按断点计算（如 lg 下 960px）。一旦父容器有 padding、border 或 box-sizing 不一致，就会破坏居中基准。

想让某块内容“视觉居中但铺满”，别套两层容器，直接用 container-fluid + 自定义居中逻辑（如 max-width + margin: 0 auto）
若必须嵌套，确保父容器无 padding/border，且子 container 的 width 计算不受干扰
最易被忽略的一点：container 在 xs 断点下 width: 100%，此时 margin: 0 auto 无效，它就是左对齐的——这点在手机调试时经常被误判为“bug”