在小屏下让按钮占满整行，需将按钮包裹于中，并确保父容器为row或设display: flex/grid；col-12在xs断点生效，col-sm-auto在sm及以上恢复默认宽度。
Bootstrap 5 怎么用 col-12 让按钮在小屏下占满整行
bootstrap 5 的按钮默认是内联元素（display: inline-block），不会自动撑满父容器。想让它在断点（比如 sm 及以下）变成全屏宽度，最直接的方式不是给按钮加 btn-block（这个类已在 v5 中移除），而是用栅格系统的响应式列类。
关键在于：把按钮包裹在 <div class="col-12 col-sm-auto"></div> 里，或者直接给按钮加 col-12 col-sm-auto —— 但必须确保按钮的父容器是 row 或设置了 display: flex / display: grid，否则 col-* 不生效。
-
col-12在xs（ -
col-sm-auto在sm（≥576px）及以上恢复为“内容自适应宽度” - 如果父容器不是
row，col-*会失效 —— 这是新手最常踩的坑
不用栅格、只靠 btn 类怎么实现？用 w-100 + 媒体查询辅助
如果你不想引入 col 类（比如按钮不在栅格布局中），w-100 是最轻量的方案：它让元素宽度为 100%，但它是静态的，不响应断点。要实现“仅小屏全宽”，就得配合 Bootstrap 的响应式工具类：w-sm-100 不存在，得自己补。
推荐做法：在自定义 CSS 中加一行：
@include media-breakpoint-down(sm) {
.btn-full-on-sm {
width: 100%;
}
}
然后按钮写成 <button class="btn btn-primary btn-full-on-sm">提交</button>。比写完整媒体查询更干净，也避免和 w-100 冲突（w-100 会在所有尺寸生效）。
为什么 btn-block 不起作用？
因为 btn-block 是 Bootstrap 4 的类，在 v5 中已被彻底移除。如果你在 v5 项目里写了 class="btn btn-block"，它不会报错，但也不会有任何效果 —— 浏览器找不到对应样式规则，按钮保持默认内联宽度。
- 查文档确认版本：v5 官网 Utility 页面里没有
btn-block - 控制台检查元素 computed style，看
width是否真为100% - 别依赖旧教程代码，尤其从 v4 升级上来的项目容易遗留这类无效类
Flex 布局下更灵活的写法：flex-grow-1 和 flex-fill
如果按钮在 btn-group 或 d-flex 容器里，可以用 Flex 工具类替代栅格。例如：
<div class="d-flex flex-column gap-2"> <button class="btn btn-primary flex-fill">登录</button> <button class="btn btn-outline-secondary flex-fill">注册</button> </div>
flex-fill 相当于 flex: 1 1 auto，在 flex-column 下会让每个按钮等高并占满可用宽度；而在 flex-row 下则横向均分。注意它不带断点响应，如需“仅小屏生效”，得套一层 d-sm-inline-flex 或用上面提到的自定义类。
响应式宽度这件事，核心就两点：明确断点触发条件、选对容器上下文。栅格类依赖 row，Flex 类依赖 d-flex，硬加类却没配对容器，90% 的“不起作用”都出在这儿。
