w-100在Flex容器中失效，因其设置的width: 100%被flex-basis和flex-shrink覆盖；子项默认flex: 0 1 auto，浏览器忽略width计算，需改用flex: 0 0 100%或flex-grow-1+flex-shrink-0等方案。
Flex容器中子元素加w-100为什么没用
因为 w-100 设置的是元素自身的 width: 100%，而 Flex 子项的宽度默认由 flex 属性控制，w-100 会被 flex-basis 和 flex-shrink 覆盖。你在 DevTools 里看到 computed width 是 auto 或一个固定值，就说明它根本没走 width 计算逻辑。
常见错误写法：
<div class="d-flex"> <div class="w-100">这不会撑满</div> </div>
- 父容器是
d-flex，子项默认为flex: 0 1 auto（可缩不可扩） -
w-100的声明优先级低于 flex 的基础计算，浏览器直接忽略 - 即使加了
!important，也只在无 flex 干预时生效，一加d-flex就失效
真正让子元素强制全宽的三种方式
核心思路：要么退出 Flex 分配逻辑，要么重写 flex 行为。
- 用
flex: 0 0 100%—— 最干净，禁用伸缩、锁定宽度为 100% 父容器宽
示例：<div class="d-flex"><div style="flex: 0 0 100%;">占满整行</div></div> - 用
flex-grow-1+flex-shrink-0—— 适合单子项场景，靠拉伸填满剩余空间
注意：若父容器有多个子项，其他项必须明确不抢空间（比如设flex-shrink-0或移除） - 临时退出 Flex 布局：
position: absolute; left: 0; right: 0;—— 仅限视觉上“看起来全宽”，但脱离文档流，会影响后续布局和响应式行为
带 gap 的 Flex 容器里怎么安全全宽
当父容器用了 gap（如 gap-3），直接设 flex: 0 0 100% 会导致总宽超 100%（100% + gap），触发换行或溢出。
- 正确做法：用 calc 抵消 gap 影响，例如
flex: 0 0 calc(100% - 1rem)（假设gap-3编译为 1rem） - 更健壮写法：用 CSS 变量
calc(100% - var(--bs-gap))，Bootstrap 5.3+ 默认定义了--bs-gap - 别依赖
px值硬编码——不同断点下gap值可能变化，var(--bs-gap)才能随响应式同步更新
为什么 btn-block 不再适用
btn-block 在 Bootstrap 5 中已被废弃，它本质是给按钮加 width: 100% 和 display: block，但在 Flex 容器中这两个规则都会被 flex 属性压制。
- 现代按钮默认是
display: inline-flex，width: 100%对它有效，但前提是它不在 Flex 容器内 - 如果你把按钮放进
d-flex，又加btn-block，computed width 仍为 auto，且可能因flex-shrink: 0导致错位 - 替代方案：用
flex-fill（等价于flex: 1 1 auto）或上面提到的flex: 0 0 100%，按需选择是否允许缩放
真正要稳，就得盯住 DevTools 里的 flex 和 width 两栏——哪个值实际生效，哪个就是你该改的地方。别信“加个类就完事”，Flex 的优先级规则比表面看起来严得多。
