按钮小屏全宽、大屏固定宽度需用 Bootstrap 5 响应式类组合，如 class="w-100 w-sm-auto"，其中 w-100 在超小屏生效，w-sm-auto 在 sm 及以上屏重置为 auto 宽度。
按钮在小屏全宽、大屏固定宽度怎么写？
直接用 bootstrap 5 的响应式宽度工具类，w-100 + 断点后缀组合即可。它不是“加个 class 就完事”，而是靠媒体查询自动切换行为。
-
w-100表示 width: 100%，但只在当前断点及更大尺寸生效；要让它“仅在小屏生效”，得配合w-md-auto这类反向控制类 - 常见写法：
class="w-100 w-sm-auto"→ 手机（ - 想在平板及以上才固定宽度？用
w-100 w-md-auto w-lg-50，逐级收窄，注意顺序不能颠倒（后声明覆盖前声明） - 别把
w-100直接加在.row子元素上——它会破坏栅格系统，先套.col再加宽度类更稳妥
为什么加了 w-100 在 .input-group 里没效果？
因为 .input-group 默认是 display: flex，子项不自动拉伸，width: 100% 被忽略是常态。
- 解决方法一：给按钮加
flex-grow-1（等价于flex: 1），让它占满剩余空间 - 解决方法二：给
.input-group加d-flex flex-column，再让按钮自身用w-100 - 验证技巧：打开开发者工具，看按钮的
Computed样式里width是不是显示为auto—— 如果是，基本就是 flex 主轴限制导致的
父容器 padding 或 max-width 干扰了按钮撑满，怎么排查？
按钮没真全宽，90% 是父级“偷偷卡住”了它，而不是按钮本身样式写错了。
- 典型陷阱：
.price-content类自带padding-right: 50px；.container自带左右padding和max-width - 检查父元素是否设置了
padding、margin、max-width，这些都会压缩按钮可用宽度 - 清除内边距优先用
px-0（Bootstrap 官方推荐），而不是style="padding: 0"—— 更语义、更易维护 - 如果按钮在
.container-fluid里还撑不满，重点盯它的直接父元素，比如是不是被包在.col里却没清 padding
Bootstrap 4 和 5 的全宽按钮写法有啥区别？
Bootstrap 5 彻底移除了 .btn-block，这个类在 v5 里连 CSS 规则都没定义，写了等于白写。
- Bootstrap 4 及更早：加
.btn-block即可，本质是display: block; width: 100% - Bootstrap 5：必须手动加
w-100或style="width: 100%"，且要注意 flex 上下文干扰 - 如果你项目还在用 v4，
.btn-block仍可用；但升级到 v5 后，所有.btn-block都得替换成w-100或对应布局方案
padding 和 flex 上下文——这两处一错，再写十遍 w-100 也没用。
