根本原因是d-flex容器默认flex-direction: row，子项width声明被flex分配逻辑覆盖，浏览器忽略w-100而按flex-basis和flex-grow重新计算宽度。
按钮在 d-flex 容器里加了 w-100 还是不撑满？
根本原因不是类没生效，而是 .d-flex 容器默认主轴为水平（flex-direction: row），子项的 width 声明会被 flex 分配逻辑覆盖——浏览器会忽略 w-100，按 flex-basis 和 flex-grow 重新计算宽度。
常见错误现象：
按钮加了 class="btn w-100"，但实际宽度只有内容宽；开发者工具里看到 computed width 是 auto，不是 100%。
- 优先用
flex-grow-1替代w-100：它让按钮主动占满剩余空间，兼容所有 Flex 主轴方向 - 如果容器是
flex-direction: column，w-100反而有效（此时 width 控制的是横轴） - 避免同时写
flex-grow-1和w-100，后者会被前者覆盖，纯属冗余
想让单个按钮在 d-flex 里独占整行，但又不想改容器方向
这不是“按钮宽度”问题，而是“如何让它成为唯一主轴子项并拉满”的布局问题。直接给按钮设 flex: 1 不够——它只在有剩余空间时才拉伸，若父容器没设高度或内容撑不开，它可能还是窄的。
- 给按钮加
flex-grow-1 flex-shrink-0：确保它增长但不收缩，避免被其他同级元素挤压 - 如果按钮是
d-flex的**唯一子元素**，最简方案是加align-self-stretch（前提是父容器有明确高度或已撑开） - 更稳妥的做法：把按钮包进一个
div，该div设flex-grow-1 d-flex，再让按钮自身w-100—— 两层 flex 隔离，语义清晰且可控
按钮在 .input-group 这类 Flex 容器中怎么全宽？
.input-group 默认是 display: flex + flex-wrap: nowrap，子项（包括按钮）不会响应 w-100，因为它们被当作 flex 项目处理，width 被忽略。
- 正确解法：给按钮加
flex-grow-1，它会立刻占满输入框右侧所有剩余空间 - 如果按钮不在末尾（比如中间插入），需配合
flex-basis: 0防止内容宽度干扰，即用flex: 1（等价于flex: 1 1 0） - 禁用内联样式如
style="width:100%"：它无法被 flex 机制识别，反而可能触发 layout thrashing
为什么用了 flex-fill 按钮还是没到边？
flex-fill 是 Bootstrap 封装的 flex: 1 1 auto，它确实会让按钮“尝试”撑满，但效果受三个隐藏因素制约：父容器 padding、max-width、以及同级兄弟元素是否也在争抢空间。
- 检查父容器是否有
.container或.col类——它们自带padding-left/right: 15px，加px-0清除 - 如果父容器是
.container，在 lg 断点下最大宽度为992px，再设w-100也没用 - 多个按钮共存时，
flex-fill会让它们均分空间；要单个全宽，必须确保它是唯一 flex 子项，或用flex-grow-1显式声明优先级
width 和 padding，找到第一个横向限制源，再针对性破除。
