按钮小屏全宽、大屏固定宽度应使用 w-100 w-md-auto：w-100 在 xs/sm（≤576px）生效，w-md-auto 从 md（≥720px）起恢复默认宽度，无需 JS 或媒体查询。
按钮在小屏全宽、大屏固定宽度怎么写 class
直接用 w-100 w-md-auto 就行，不用额外 js 或 media query。bootstrap 5 的响应式工具类是按断点“向上覆盖”的：w-100 在 xs/sm 下生效（≤576px），w-md-auto 表示从 md（≥720px）开始恢复 auto 宽度，也就是默认行为。
常见错误是写成 w-sm-100 w-md-auto——w-sm-100 只在 sm 断点生效，xs 下反而没效果；而 w-100 是基础级，覆盖所有更小断点。
-
w-100 w-md-auto：手机全宽，平板/桌面恢复常规宽度 -
w-100 w-lg-50：xs–md 全宽，lg（≥992px）缩为 50% 宽 - 别用
w-100单独加在.row直接子元素上——它会破坏栅格流，必须包在.col里再加
按钮在 .input-group 里加了 w-100 还是不撑满？
因为 .input-group 默认是 display: flex，子项不会响应 width 声明。此时 w-100 无效，computed width 显示为 auto。
解决方式只有两个，选一个就行：
- 给按钮加
flex-grow-1（等价于flex: 1），让它主动占满剩余空间 - 把
.input-group改成垂直方向：flex-column，再配合按钮自身的w-100
验证方法：打开开发者工具 → Elements → 看按钮的 Computed 样式里 width 是否真为 100%；如果不是，基本就是 flex 主轴限制。
为什么加了 w-100 按钮还是没到边？
不是按钮的问题，是父容器“扣掉了空间”。最常踩的坑有三个：
-
.col或.container-fluid自带padding-left/right: 15px，得加px-0清除 - 父级有
max-width（比如.container在 lg 下是 992px），再宽也没用 - 某层祖先元素写了
padding-right: 50px（如.price-content类），直接压缩可用宽度
检查顺序建议：从按钮往上逐层看 computed padding / margin / max-width，直到找到第一个非 0 的横向约束值。
要不要用 style="width: 100%" 替代 w-100？
能用就别用内联样式。原因很实在：
-
style="width: 100%"无法响应断点，没法做「小屏全宽、大屏固定」这种渐进控制 - 它会覆盖掉 Bootstrap 的响应式类，比如你同时写
class="w-100 w-md-auto" style="width: 100%"，后者永远生效 - 维护成本高：每个按钮都要手写 style，没法统一复用或通过主题开关切换
真正绕不开内联样式的场景极少，比如需要精确到 calc(100% - 2px) 的微调——但那种情况，w-100 本来就不是设计来干这个的。
