Bootstrap 5 已移除 btn-block 类，需用 w-100、col-* 或 flex-fill 等实用类实现响应式按钮宽度；w-100 仅设宽度为父容器100%，效果受父级约束，应按容器类型选择合适组合。
btn-block 在 Bootstrap 5 中已移除，改用实用类控制宽度
Bootstrap 5 不再提供 btn-block 类，直接加它不会生效。响应式按钮宽度必须通过 col-*、w-100 或 flex-fill 等实用类组合实现，核心是理解「块级行为」本质是「宽度占满父容器」，而非一个独立类。
常见错误现象：<button class="btn btn-primary btn-block">提交</button> 在 BS5 中按钮仍为默认内联宽度，毫无变化。
-
w-100最简单：强制宽度 100%，但不响应式（移动端和桌面一样撑满） -
col-12 col-md-auto更合理：移动端占满，中屏及以上按内容自适应 - 若按钮在
<div class="row"> 内，可用 <code>col或col-12直接包裹按钮，避免额外样式响应式按钮宽度的三种典型场景写法
根据父容器类型选择策略，不是所有情况都适合
w-100：- 普通表单行（无
row）：<button class="btn btn-primary w-100 w-md-auto"></button>—— 移动端占满，≥768px 恢复内容宽度 - 栅格布局内（有
row）：<div class="col-12 col-lg-6"><button class="btn btn-primary w-100"></button></div>—— 按列断点控制最大宽度，内部再用w-100填满该列 - 工具栏或按钮组：
<div class="d-grid gap-2 d-md-flex justify-content-md-center"><button class="btn btn-primary flex-fill"></button></div>——d-grid让子项垂直堆叠，flex-fill在 flex 容器中撑满剩余空间
为什么不能只靠 w-100？注意父容器约束
w-100只让元素宽度为父容器的 100%，如果父容器本身很窄（比如col-4），按钮也不会变宽。实际效果取决于上层结构。- 检查父元素是否有固定宽度类（如
col-3、mw-50），它们会限制w-100的上限 - 避免嵌套多层
w-100，容易因盒模型（padding/border）导致溢出或滚动条 - 在
form-group或input-group中使用时，优先用flex-column+w-100替代强行拉伸
兼容旧项目迁移：快速替换 btn-block 的脚本思路
如果要批量处理大量 BS4 代码，不要手动改每个按钮。可以用浏览器控制台临时运行：
document.querySelectorAll('button.btn-block, input[type="submit"].btn-block, input[type="button"].btn-block').forEach(el => { el.classList.remove('btn-block'); el.classList.add('w-100', 'w-md-auto'); });但注意：这个脚本只覆盖最常见情况，
btn-block原本可能被 JS 动态添加，或与其他布局类（如btn-group）共存，需人工复查。真正容易被忽略的是按钮文字换行问题——
w-100后长文本可能在小屏折成两行，影响可读性，必要时加text-nowrap或限制max-width。 - 普通表单行（无
