Bootstrap按钮在sm断点下强制100%宽度，需用col-sm-12包裹于row内，或使用w-sm-100（5.3+）；旧版本须自定义媒体查询，禁用内联width及已废弃的btn-block。
Bootstrap按钮如何在sm断点下强制100%宽度
直接加 col-12 或 col-sm-12 类就行，但要注意它只对“栅格容器内的按钮”生效——也就是说，按钮得是 <div class="row"> 里的 <code><div class="col-*"> 子元素，而不是直接加在 <code><button></button> 上。
常见错误是这么写：
<button class="btn btn-primary col-sm-12">提交</button>这在 Bootstrap 5+ 中无效，因为
col-* 类依赖 flex 布局和父容器的 row + col 结构，单独用在非容器元素上不会触发宽度计算。
- 正确做法：把按钮包进
<div class="col-sm-12">，再确保外层有 <code>row - 如果按钮不在栅格系统里（比如独立放在卡片 footer 或表单末尾），改用响应式工具类
w-100 w-sm-auto更直接 -
w-100是全局 100% 宽，w-sm-100在 sm 及以上才生效；注意 Bootstrap 5.3+ 才支持w-{breakpoint}-100这种写法，旧版本只能靠媒体查询或自定义类
用w-sm-100实现“仅在sm及以上全宽”的兼容写法
如果你用的是 Bootstrap 5.2 或更早版本，w-sm-100 不存在，此时要手动补一个响应式规则：
@media (min-width: 576px) {
.btn-full-sm {
width: 100%;
}
}
然后给按钮加 class="btn btn-primary btn-full-sm"。别用 style="width:100%" 写内联样式——它无法被媒体查询覆盖，会破坏响应逻辑。
- Bootstrap 默认按钮是
inline-flex，width:100%对它有效，不需要额外设display:block - 如果按钮带图标（比如
<i class="bi bi-plus"></i>），全宽后图标和文字可能换行，建议加flex-nowrap防止 - 注意
btn-block已在 Bootstrap 5 中废弃，别再用
按钮在form-group里怎么随屏幕变宽
当按钮放在 <div class="mb-3"> 或 <code><div class="form-group">（Bootstrap 4）中时，它默认是块级，但宽度受父容器 padding 和 max-width 影响。想让它真正撑满可用区域，关键是控制父容器。
<ul>
<li>给父 <code>div 加 mx-n2（移除左右 padding）或 px-0（清空水平 padding）
max-width 限制（比如某些 card-body 的默认样式），可加 mw-100 覆盖form-floating，里面的按钮需额外加 position-relative w-100，否则会被浮动标签的定位逻辑压缩为什么有时w-100没效果？检查这几个地方
最常踩的坑不是写法错，而是布局上下文干扰：
- 父元素设置了
overflow: hidden且高度固定，会导致子元素宽度被截断 - 按钮用了
btn-lg但外层容器有text-center，视觉上像没占满，其实是居中对齐造成的错觉 - 使用了 CSS-in-JS 或框架（如 React + styled-components），全局样式被隔离，
w-100类没打进 DOM - 自定义主题里重写了
$enable-responsive-font-sizes: false，虽不直接影响宽度，但常伴随其他响应式类失效，值得顺带排查
复杂点在于：全宽行为往往不是单一类能决定的，它取决于按钮所处的嵌套层级、父容器的 display 类型、以及是否与其他工具类（如 mx-auto、justify-content-center）冲突。调试时优先看 computed styles 里的 width 和 box-sizing，比猜类名更可靠。
