Bootstrap表单按钮设为全宽，核心是先用d-block将其转为块级元素，再配合w-100生效；直接加w-100无效因按钮默认inline-block，width属性被忽略；推荐d-block w-100组合，兼容所有5.x版本，且不依赖栅格。
Bootstrap 表单提交按钮设为全宽，核心不是加 width: 100%，而是让按钮在当前上下文中真正具备“可拉伸”的行为——它默认是 inline-block，w-100 单独用会失效。
表单里直接加 w-100 为啥不生效？
常见现象：按钮在 <form> 或 <div class="mb-3"> 里加了 w-100，但宽度纹丝不动，computed 样式里 width 仍是 auto。
-
<button>默认是display: inline-block，width属性对其无效 -
w-100只是width: 100% !important，不能改变显示模式 - 必须先让它变成块级或 flex 子项：加
d-block，或包进col-12，或父容器设为d-flex
推荐写法：用 d-block w-100 组合
这是最轻量、最可控的方案，不依赖栅格系统，适合大多数表单底部按钮。
<form>
<div class="mb-3">
<label class="form-label">邮箱</label>
<input type="email" class="form-control">
</div>
<button type="submit" class="btn btn-primary d-block w-100">提交</button>
</form>
-
d-block强制按钮变为块级元素，w-100才能起作用 - 兼容所有 Bootstrap 5.x 版本（
btn-block已彻底移除） - 如果按钮带图标（如
<i class="bi bi-send"></i>），建议额外加flex-nowrap防止文字换行
按钮在 .input-group 或 .btn-group 里怎么全宽？
这类容器默认是 display: flex，w-100 会被忽略，必须用 flex 布局逻辑处理。
- 在
.input-group中：给按钮加flex-grow-1（等价于flex: 1），而不是w-100 - 在
.btn-group中：外层加d-flex w-100，再给每个按钮加flex-fill；或直接弃用.btn-group，改用d-flex+gap-2 - 若按钮和输入框同行（如搜索框右侧按钮），不要强行
w-100，应统一用col控制比例，例如：<div class="col-8"><input></div><div class="col-4"><button></div>
为什么检查父容器比调按钮样式更重要？
90% 的“全宽失败”其实卡在父级：比如 <div class="container"> 自带 max-width 和左右 padding，或者表单包裹在 <div class="card-body"> 里，而 card-body 默认有 padding。
- 先看按钮的 computed
width是不是真为100%，如果不是，往上查父元素的padding、max-width、margin - 清除内边距优先用
px-0（Bootstrap 官方类），别用style="padding: 0" - 如果按钮在
.modal-footer或.card-footer，注意这些区域默认text-align: right或justify-content: flex-end，需加text-start或justify-content-start对齐
