Bootstrap 5 已移除 .btn-block，应改用 w-100 或 width: 100%；若父容器为 flex，则需加 flex-grow-1 或调整布局，同时注意 padding、max-width 等父级限制。
用 .btn-block 还是 width: 100%？
bootstrap 4 及更早版本中，.btn-block 是官方推荐的全宽按钮类；但 bootstrap 5 已**完全移除**该类，直接用 width: 100% 或 flex 布局替代。如果你在 bootstrap 5 项目里还写 .btn-block，它不会生效——连 css 规则都不存在了。
- Bootstrap 3/4：加
.btn-block即可，它本质就是display: block; width: 100%; - Bootstrap 5：必须手动加
class="w-100"（响应式宽度工具类）或内联style="width: 100%;" - 注意：若按钮在
.input-group内，w-100可能被父容器 flex 行为干扰，需额外加d-block
为什么加了 width: 100% 还没撑满？常见布局陷阱
按钮没真正全宽，往往不是样式问题，而是父容器“不给空间”。最典型的是：.price-content 类自带 padding-right: 50px，或者按钮被包在 .col 里却没设 px-0 清除左右 padding。
- 检查父元素是否设置了
max-width、padding或margin，这些都会压缩按钮可用宽度 - 如果按钮在
.input-group中，.input-group默认是display: flex，子项不会自动拉伸，得给按钮加flex-grow-1或改用flex-column方向 - 避免把按钮放在
.container内又同时用position: relative+top偏移——这不影响宽度，但会让视觉上“看起来没对齐”
响应式全宽按钮：不同断点怎么处理？
全宽不该是“永远 100%”，而应是“在小屏全宽、大屏固定宽度”。Bootstrap 5 的响应式工具类刚好支持这种渐进控制。
- 移动端全宽 + 桌面端固定宽度：
class="w-100 w-md-auto"（小屏 100%，≥768px 恢复 auto） - 需要最小宽度保形：
class="w-100 w-sm-75 w-lg-50"，逐级收窄 - 慎用
w-100在.row直接子元素上——它会破坏网格系统，优先套一层.col再加宽度类
Flex 布局下按钮全宽失效？这是 display 冲突
当按钮父容器是 display: flex（比如 .d-flex 或 .input-group），width: 100% 默认不生效，因为 flex 子项默认不拉伸。
- 解决方法一：给按钮加
flex-grow-1（等价于flex: 1） - 解决方法二：父容器改用
flex-column，再让按钮自身w-100 - 验证技巧：浏览器开发者工具里看 computed 样式，如果
width显示为auto而不是100%，基本就是 flex 主轴限制导致的
w-100 也没用。 
