bootstrap 5中flex-grow无效是因为.col-*默认flex:0 1 auto（即flex-grow:0），必须设flex-basis:0才能生效，推荐用内置.flex-grow-1类或手写flex:1 1 0。
flex-grow 在 bootstrap 5 栅格中为什么没反应
因为 bootstrap 5 的 .row 默认是 display: flex，但它的直接子元素（即 .col-*）默认设置了 flex: 0 1 auto —— 这意味着 flex-grow: 0，无论你怎么写 style="flex-grow: 1"，它都不会放大。
- 必须显式覆盖
flex值，比如用flex: 1或flex-grow: 1+flex-shrink: 1+flex-basis: 0 - 只加
flex-grow: 1不够，flex-basis是关键：设为0才能让剩余空间被真正“均分”或“独占” - Bootstrap 4 不支持 Flexbox 栅格原生行为（需手动启用
flex-row），这个问题主要出现在 Bootstrap 5+
让某一列占据剩余宽度的两种可靠写法
假设你有一行两列：.col-auto 放图标或标签，另一列要撑满剩下所有空间。别碰 .col 类的响应式断点，它们会干扰 flex-grow 计算。
- 推荐写法（语义清晰、兼容性好）：
<div class="row"> <div class="col-auto">Label</div> <div class="flex-grow-1">This fills the rest</div> </div>
——.flex-grow-1是 Bootstrap 5 内置工具类，等价于flex-grow: 1; flex-shrink: 1; flex-basis: 0 - 手写内联样式（仅调试用）：
style="flex: 1 1 0"，不要只写flex-grow: 1；flex-basis: 0才能避免内容宽度干扰伸缩 - 如果用了
.col（如.col-3），先加flex-grow-1不起作用——得加!important或用更具体选择器覆盖，不建议
和 col 混用时的常见错误
有人想“左边固定 200px，右边自适应”，于是这样写：<div class="col-3"></div>
<div class="flex-grow-1"></div>。结果右边没占满，甚至溢出。
-
.col-3编译后是flex: 0 0 25%，而.flex-grow-1是flex: 1 1 0，两者共存时，浏览器按 flex 算法分配：左边占 25% 宽度 + 内边距，右边从“剩余空间”开始算，但受父容器 padding 和 gutters 影响，视觉上常显得窄 - 正确做法：去掉所有
.col-*，改用.col-auto+.flex-grow-1，或用width+margin-left: auto替代（适合固定宽场景） - 注意
.row的gutter（默认--bs-gutter-x: 1.5rem）会吃掉空间，.flex-grow-1分的是“扣除 gutter 后的剩余”，不是整个容器宽度
IE11 兼容性与替代方案
Bootstrap 5 官方已放弃 IE11 支持，如果你还在维护老项目，.flex-grow-1 在 IE11 下完全无效。
- IE11 只认
-ms-flex-positive: 1，但 Bootstrap 4 的.flex-grow-1工具类没包含这个前缀，需自己补全 CSS - 更稳妥的降级方案：用
width: calc(100% - 200px)配合.col-auto固定宽列，但需确保父容器无 padding 干扰 - 或者退回 Bootstrap 4 的
.d-flex .flex-row+ 手动写flex: 1，并确保全局加了-ms-前缀（需 PostCSS autoprefixer 配置）
flex-grow 的核心就一句话：它不看“还剩多少像素”，只看“flex-basis 是多少、其他项占了多少主轴空间”。很多问题其实卡在 flex-basis 没清零，而不是语法写错了。
