width: 100% 对 bootstrap 按钮无效，因其默认为 inline-block 元素，而 width 在 inline-level 元素上被浏览器忽略；需改用 d-block、w-100（配合块级上下文）或 flex 布局方案，并注意 box-sizing: border-box 和断点配置一致性。
为什么 width: 100% 对 Bootstrap 按钮无效
因为按钮（.btn）默认是 inline-block 元素，而 width: 100% 在 inline-level 元素上不生效 —— 浏览器直接忽略它。即使你写 style="width: 100%"，computed 样式里 width 仍显示为 auto。
常见错误现象：<button class="btn btn-primary" style="width: 100%">提交</button> 在卡片页脚或模态框底部看起来没撑开，实际是被当成行内元素处理了。
- 必须先让按钮变成块级或 flex 子项：加
class="d-block"或把按钮放进.d-flex容器里 - 不要对
<a></a>标签按钮用width: 100%—— 它默认是 inline，且无d-block类时 flex-fill 也不起作用 - Bootstrap 5 中更推荐用
w-100辅助类，它等价于width: 100% !important，但仅对已具备块级行为的元素可靠
.btn-group 加 w-100 为啥还是不占满
.btn-group 默认是 display: inline-flex，它的 w-100 类在 Bootstrap 5 中确实会被应用，但 inline-flex 容器本身不参与常规文档流的宽度分配 —— 它只按内容收缩，w-100 无法突破这个限制。
你看到的“没占满”，其实是 .btn-group 自身没 stretch，不是子按钮没拉伸。
- 正确做法：外层改用
class="d-flex w-100"替代.btn-group，再给每个按钮加flex-fill - 或者保留
.btn-group，但必须额外加class="d-flex w-100"（覆盖其 inline-flex 行为） - 下拉按钮（
.dropdown-toggle）要单独设flex-grow-0，否则会被均分压缩，箭头图标错位
Flex 容器里按钮加 w-100 反而错位
当按钮放在 .card-footer、.input-group 或自定义 d-flex 区域中时，w-100 会让它强行占满父容器宽度，但忽略了 flex 子项的默认 flex-shrink: 1 —— 它会和兄弟元素抢空间，导致文字挤成一行、图标消失，甚至横向溢出触发滚动条。
典型场景：导航栏里的搜索框 + 按钮组合，w-100 一加，输入框就顶出右侧边界。
- 优先用
flex-grow-1+min-width: 0替代w-100（尤其在 flex 容器内） -
input类表单控件必须加min-width: 0才能真正收缩，否则 flex 不会动它 - 避免对按钮写
style="width: 100%"—— 会覆盖 Bootstrap 的 CSS 变量（比如主题色适配时宽度异常）
撑满后水平溢出：box-sizing 和 padding 是真凶
就算你成功让按钮变块、加了 w-100、也进了 flex 容器，它仍可能溢出父容器 —— 根本原因是默认 box-sizing: content-box，此时 width: 100% 只管内容区，padding 和 border 会额外叠加出去。
例如：父容器宽 300px，按钮有 padding: 8px 16px + border: 1px，总宽就是 300 + 32 + 2 = 334px。
- 全局修复：项目入口加
* { box-sizing: border-box; }（含::before和::after） - 局部修复：给按钮加
class="w-100 p-2"同时确保其祖先没额外 padding；检查 computed 样式里的box-sizing是否真为border-box - 特别注意
.input-group里的按钮：它左右有border-radius和border，必须和 input 共享同一套盒模型，否则边缘对不齐
最常被忽略的一点：你调了断点变量（比如把 $grid-breakpoints: (lg: 1024px)），但忘了同步改 $container-max-widths，结果按钮在 1024–1199px 区间看着全宽，实际卡在旧的 960px 容器里，留白+缩窄同时发生。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
