不能直接用；Bootstrap 5 的 .col 默认 flex: 0 1 auto 禁用了 flex-grow，需用自定义 class（如 .col-grow { flex-grow: 1 !important; flex-basis: 0; }）覆盖，否则受内容尺寸或祖先节点限制影响生效。
flex-grow 能让 Bootstrap 列自动填满剩余空间吗？
不能直接用——Bootstrap 5 的 .col 默认是 flex item，但它的 flex 值是 0 1 auto，flex-grow: 1 被禁用了。想让它“自动延伸”，得手动覆盖。
- Bootstrap 4/5 的列默认不响应父容器剩余宽度，除非你显式设置
flex-grow: 1 - 直接加
class="flex-grow-1"在.col上通常无效，因为 Bootstrap 的 CSS 优先级更高（比如.col { flex: 0 1 auto }） - 必须用更具体的规则覆盖，比如加
!important或提高选择器权重
怎么安全地给 .col 加上 flex-grow: 1？
推荐用自定义 class + 明确的 CSS 规则，避免污染全局或依赖 !important：
- 在自己的样式表里写：
.col-grow { flex-grow: 1 !important; flex-basis: 0; /* 避免受 content 影响初始尺寸 */ } - 用法：
<div class="row"><div class="col-6">固定宽</div><div class="col-grow">自动撑满</div></div> - 注意：如果同行有多个
.col-grow，它们会均分剩余空间；若只想一个撑满，其余保持原尺寸，就只给那一个加该 class
为什么有时候加了 flex-grow 还不生效？
常见卡点不在 flex 属性本身，而在父容器或祖先节点的限制：
-
.row默认是display: flex，没问题；但如果外层套了.container-fluid或自定义 wrapper，且它设了overflow: hidden或min-width: 0，可能触发 flex shrink 行为 - 某些 UI 库（如某些 Admin 模板）会重置
.row的flex-wrap或align-items，间接影响主轴伸缩 - 内容本身有硬性宽度（比如图片没设
max-width: 100%、table未加table-responsive），会导致 flex item 无法收缩，进而阻碍 grow 生效
和 Bootstrap 自带的 .w-100 或 .flex-fill 比有什么区别？
.w-100 是纯 width 控制，脱离 flex 布局逻辑；.flex-fill 是 Bootstrap 5 提供的替代方案，但它等价于 flex: 1 1 auto，仍受内容尺寸影响，不如 flex-grow: 1; flex-basis: 0 可控：
立即学习“前端免费学习笔记（深入）”；
-
.flex-fill在小屏幕可能因内容撑开而溢出，尤其含长单词或未折行文本时 -
flex-basis: 0强制从零开始分配空间，对齐行为更可预测 - 如果你用的是 Bootstrap 4，
.flex-fill不存在，只能手写 class
实际项目里最容易被忽略的，是 flex-basis 和内容最小尺寸之间的拉扯——哪怕只是一段没设 word-break 的英文长串，都可能让 flex-grow 看似“失灵”。
