flex-grow-0 本身不支持响应式断点，需配合 d-none 和 d-{breakpoint}-flex 类实现断点控制；.col 类与 flex-grow-0 冲突，应避免混用；自定义 css 的 flex: none 更可靠。
flex-grow-0 在响应式断点下为什么没生效
根本不是类名写错了，而是 flex-grow-0 本身不带断点前缀——Bootstrap 默认只提供无条件的 flex-grow-0 和 flex-grow-1，没有 flex-grow-0-md 这类响应式变体。你加了 flex-grow-0 却只在某断点想禁用拉伸，结果它从 sm 开始就一直生效，小屏反而卡死。
如何让 flex-grow-0 只在特定断点起作用
必须手动组合响应式显示类 + 基础弹性类，靠“显式隐藏 + 显式启用”来模拟断点控制：
-
d-flex必须加在父容器上，否则所有 flex 类都无效 - 对目标子元素，用
d-none d-md-flex隐藏小屏下的 flex 行为（此时flex-grow-0不起作用） - 再加
flex-grow-0，它只在d-md-flex生效时才被解析 - 如果需在 lg 下才禁用拉伸，则换成
d-none d-lg-flex flex-grow-0
示例：<div class="d-flex">
<div class="d-none d-md-flex flex-grow-0 w-25">固定栏</div>
<div class="flex-grow-1">自适应内容</div>
</div>
混用 .col 和 flex-grow-0 的常见翻车点
Bootstrap 的 .col 类自带 flex: 0 0 auto，它和 flex-grow-0 本质冲突——前者已禁用 grow，后者再加等于多此一举，还可能因 CSS 优先级导致意外覆盖。
- 别在
.col-3上叠加flex-grow-0：开发者工具里会看到flex-grow被划掉 - 想实现“md 起固定宽、sm 下堆叠”，直接用
col-md-3 col-sm-12，不用 flex 工具类 - 真要混合控制，得先移除
.col，改用d-flex+flex-grow-0+w-md-25等宽度类
替代方案：用 flex: none 配合断点媒体查询
如果项目允许少量自定义 CSS，比依赖工具类更可控：
- 写
@media (min-width: 768px) { .no-grow-md { flex: none; } } - 给元素加
no-grow-md类，仅在 md+ 断点禁用伸缩 -
flex: none比单独flex-grow: 0更稳妥，它同时锁住 grow/shrink/basis - 注意 IE11 不支持
flex: none，如需兼容，得回退到-ms-flex: 0 0 auto
事情说清了就结束。最常被忽略的一点是：Bootstrap 的 flex 工具类本身不响应断点，所谓“响应式 flex 控制”，本质是靠显示/隐藏切换来间接达成——别指望类名带 -md 就自动生效。
