bootstrap 5 中按钮响应式全宽需用 col-{breakpoint}-12 或 w-{breakpoint}-100 组合实现，btn-block 已移除；w-100 全局生效，须搭配断点前缀（如 w-sm-100）或栅格容器（如 col-sm-12 套于 row 内）才能按断点控制，且需注意父容器 flex/padding 约束。
按钮在 Bootstrap 5 中如何响应式全宽？
Bootstrap 5 默认不提供“断点下按钮全宽”的现成类，但能用内置的 col-{breakpoint}-12 或 w-{breakpoint}-100 组合实现，关键在于理解栅格系统和宽度工具类的优先级与作用时机。
常见错误是直接加 btn-block —— 这个类在 Bootstrap 5 中已被移除，用了会无效。另外，仅用 w-100 是全局生效，无法按断点控制；必须搭配断点前缀。
-
w-md-100表示「从md（768px）起宽度为 100%」，但注意：它只对md及更宽屏幕生效，小屏仍保持默认宽度 - 若要「
sm及以上全宽」，用w-sm-100；若要「仅xs下全宽」，得配合d-xs-inline-block+w-xs-100，但更稳妥的是用栅格 - 推荐写法是套一层
div，用col-12 col-md-auto控制按钮容器：小屏占满，中屏及以上恢复内联尺寸
<div class="col-12 col-md-auto"> <button class="btn btn-primary">提交</button> </div>
为什么用 col-12 而不是直接 w-*n*-100？
因为按钮默认是 inline-block，w-* 类对其生效的前提是元素已具备块级行为（如设置了 display: block），否则可能被忽略。而 col-12 天然让父容器成为 flex item 或 grid item，并强制宽度为 100%，兼容性更稳。
尤其在 form-group 或 input-group 内部，直接加 w-sm-100 容易被父容器的 flex 布局压制，此时 col 的栅格语义反而更可靠。
-
col-12在xs下生效，col-md-auto在md及以上还原为内容自适应宽度 - 若需在
lg才全宽，写成col-lg-12即可，其余断点自动继承上一级行为 - 避免混用
col和w-*，两者逻辑不同，叠加可能导致意外交互
移动端全宽按钮的实际布局陷阱
真正容易出问题的不是类名本身，而是按钮所处的上下文：比如放在 navbar、card-footer 或 modal-footer 里时，父容器可能有 justify-content: center 或 text-align: right，导致即使按钮宽度 100%，视觉上仍居中或右对齐。
- 检查父容器是否设置了
text-center或justify-content-*，必要时用text-start覆盖 - 在
modal-footer中，col-12会撑满整个 footer 区域，但按钮默认居右；此时应配合text-start或用ms-auto调整位置 - 如果按钮在
form内且同行还有其他控件，全宽会破坏行内布局，建议统一用row+col控制每项宽度
实际效果取决于你是否把按钮放进一个响应式容器里，而不是给按钮本身加一堆宽度类。很多开发者卡在这一步，反复试 w-xx-100 却没效果，其实缺的只是一个包裹的 div class="col-12"。
