Bootstrap 5 辅助类 flex-grow-1 填充剩余空间-Bootstrap教程-PHP中文网

flex-grow-1 失效主因是父容器未设 d-flex；混用 col 类、存在 width/min-width、内容过长或 flex-wrap: wrap 均会阻碍其生效；flex: 1 比 flex-grow-1 更适合均分剩余空间。

flex-grow-1

在 Bootstrap 5 中确实能填充剩余空间，但**它不是万能的，多数失效场景都源于对 flex 布局前提条件的忽略**。

为什么 `flex-grow-1` 加了没反应

最常见原因是父容器没启用 flex 布局——flex-grow-1 是 flex item 的属性，没有 d-flex（或 d-inline-flex）就完全不生效。

检查父元素是否加了 d-flex，且子元素是它的直接子项
col 类和 flex-grow-1 混用会冲突：col 内部有 flex: 0 1 auto，覆盖了 flex-grow: 1
子元素自身有 width、min-width 或内容过长（如未换行的长单词），会锁死尺寸，导致“无剩余空间”可分
父容器高度不足或设置了 flex-wrap: wrap，让子项换行后主轴方向改变，flex-grow 失效

`flex-grow-1` 和 `flex: 1` 的实际差异

flex-grow-1 只设置 flex-grow: 1，其余保持默认（flex-shrink: 1, flex-basis: auto）；而 flex: 1 是 flex-grow: 1 + flex-shrink: 1 + flex-basis: 0 的简写，后者更利于“从零开始均分剩余空间”。

想让一个元素独占剩余宽度，用 flex-grow-1 就够了（前提是其他兄弟项 flex-grow: 0）
多个同级项要按比例分剩余空间，比如导航链接平均分布，flex: 1 更可靠，因为 flex-basis: 0 避免了内容宽度干扰
如果某列需要固定宽（如侧边栏），建议用 flex: 0 0 200px，而不是只靠 w-25 或 col-2

三栏布局中左右固定、中间自适应的最小可行写法

这不是栅格问题，是 flex 布局问题。别用 col-2 col-8 col-2——那是等比缩放，不是固定+自适应。

VPS Bootstrap

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

下载

父容器必须是 d-flex
左侧：加 flex-grow-0 + style="width: 200px" 或 flex: 0 0 200px
中间：加 flex-grow-1（或更稳妥的 flex: 1）
右侧：同左侧，flex-grow-0 + 固定宽
避免给中间列加 width、min-width，否则它可能拒绝伸展

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