应使用 w-100 w-md-auto 实现小屏全宽、大屏自适应：w-100 在 ≤md 断点生效，w-md-auto 从 md 起覆盖为 auto；顺序不可颠倒，且需排查父容器 padding/max-width 等隐式约束。
直接用 w-100 + 断点重置类，比如 w-100 w-md-auto，就能让按钮在小屏全宽、大屏恢复默认宽度——不需要写媒体查询，也不依赖栅格容器。
为什么不能只加 w-100？
因为 w-100 是“向上生效”：它在 xs 断点（≤576px）启用，并持续作用于所有更大断点，除非被后续类覆盖。如果你只写 w-100，按钮在桌面端也会是 100% 宽，不是你想要的“仅小屏全宽”。
-
w-sm-100在 Bootstrap 5.2 及更早版本中不存在，强行使用无效 -
btn-block已在 Bootstrap 5 中彻底移除，加了也没效果 - 内联样式
style="width: 100%"会破坏响应逻辑，无法被断点类覆盖
w-100 w-md-auto 怎么工作？
这是 Bootstrap 5 响应式工具类的标准组合逻辑：基础类定义默认行为，断点后缀类在对应尺寸及以上覆盖它。
-
w-100→ 所有 ≤ md 断点（即 xs/sm/md）下宽度为 100% -
w-md-auto→ 从 md 断点起（≥768px），宽度重置为auto，按钮回归内容自适应宽度 - 顺序不能颠倒：
w-md-auto w-100会失效，因为后声明的w-100覆盖了前面的w-md-auto
按钮在 .input-group 里加了 w-100 还是不撑满？
因为 .input-group 默认是 display: flex，子元素（包括按钮）不会响应 width 声明，Computed 样式里 width 显示为 auto 是正常现象。
- 解决方法一：给按钮加
flex-grow-1，让它占满剩余空间 - 解决方法二：把
.input-group改成垂直流d-flex flex-column，再让按钮用w-100 - 验证方式：打开 DevTools → Elements → 查看按钮的 Computed width 是否真为
100%
父容器“偷偷卡住”按钮怎么办？
按钮没真全宽，90% 的原因是父级设置了横向约束，而不是按钮本身样式错。
- 检查直接父元素是否有
padding-left/right，优先用px-0清除，别手写style="padding: 0" - 注意
.container有max-width限制，.col有左右padding，这些都会压缩按钮可用宽度 - 逐层往上查 computed padding / margin / max-width，直到找到第一个非零横向约束值
真正麻烦的不是怎么写 class，而是按钮嵌套层级里那些没声明但实际生效的 padding 和 max-width——它们不会出现在你的 HTML 里，却实实在在挡住按钮伸展。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
