flex-fill不能直接套在.col上，因.col依赖.row提供flex上下文，而.row默认flex-wrap:wrap导致超限时失效；需父容器加d-flex flex-nowrap并配合flex-fill，或弃用.col改用纯flex子项。
flex-fill 为什么不能直接套在 .col 上？
因为 flex-fill 的语义是「在主轴方向尽可能伸展，等价于 flex: 1 1 auto」，但它只在真正的 flex 容器中生效。而 Bootstrap 的 .col 默认依赖 .row（即 d-flex）提供 flex 上下文——但 .row 默认启用了 flex-wrap: wrap（Bootstrap 5 行为变更），一旦子项宽度超限，flex-fill 就会失效或被压缩。
实操建议：
- 若想让多个
.col等宽填满一行，父容器必须同时有d-flex flex-nowrap，再给每个.col加flex-fill；仅加flex-fill不够 - 更稳妥的写法是弃用
.col，改用<div class="flex-fill"></div>直接作为 flex 子项，避免栅格系统内边距和flex-basis干扰 - 在卡片网格中，
flex-fill常配合min-width: 200px使用，防止小屏下过度收缩
flex-fill 和 flex-grow-1 有什么区别？
flex-fill 是 Bootstrap 封装的完整 flex 声明：flex: 1 1 auto；而 flex-grow-1 只控制 flex-grow: 1，其余两项沿用浏览器默认（flex-shrink: 1, flex-basis: auto）。两者在多数场景视觉一致，但关键差异在响应行为：
-
flex-fill在内容极少时仍保持“撑满”倾向，因flex-basis: auto参考内容尺寸，但flex-grow: 1优先级更高 -
flex-grow-1单独使用时，若兄弟项设了flex-shrink: 0，它可能被压缩 ——flex-fill因含flex-shrink: 1更抗挤压 - 两者都不支持响应式前缀（如
flex-lg-fill无效），需搭配媒体查询或断点类组合使用
为什么加了 flex-fill 还是没等宽？
典型现象：三个 flex-fill 子项在宽屏下宽度不均，尤其当其中一项含长文本或图片时。根本原因不是类没生效，而是 flex-basis: auto 导致初始尺寸不同，flex-grow 再均分剩余空间，起点不一致则结果不一致。
实操建议：
- 统一初始基准：给所有子项加
flex-basis: 0（即用flex-fill flex-basis-0），强制从零开始均分空间 - 或改用
flex-grow-1 flex-shrink-1 w-100，显式锁定宽度参考系 - 检查是否有隐藏的 margin/padding 干扰（比如
.card内部的.card-body默认有 padding） - 移动端 Safari 下，若父容器高度由视口单位（如
vh）定义，需换用dvh避免地址栏缩放导致计算偏差
flex-fill 在卡片内部怎么用才不截断内容？
在卡片（.card）里用 flex-fill 常见于让按钮沉底、正文占满剩余空间。但直接加在 .card-body 上容易导致文字溢出或按钮消失——因为 flex-fill 本身不提供高度约束，它只负责分配空间。
正确链路是：
- 外层卡片必须设
h-100（否则内部 flex 无高度可分） -
.card-body加d-flex flex-column h-100，确立垂直主轴 - 正文区域加
flex-grow-1（非flex-fill），确保它吃掉中间空白 - 底部按钮加
mt-auto（比align-self-end更稳定，不受文字行数影响）
注意：flex-fill 在卡片内部一般不用在 .card-body 上，它更适合用在卡片并列的容器层级（如卡片网格的父 div），而非单卡内部的内容流控制。
