bootstrap 3 按钮在 flex 容器中不等宽，因其默认为 inline-block 且未设 flex 属性、box-sizing: border-box 及合理 flex-basis；需加 flex: 1 0 0、min-width: 0 和 box-sizing: border-box 才能均分空间。
Bootstrap 3 按钮在 display: flex 容器中不等宽的根源
因为 .btn 在 Bootstrap 3 中仍是 display: inline-block，它没声明 flex 相关属性，一旦被塞进 display: flex 的父容器里，浏览器就按“非 flex item”的默认规则处理它：既不拉伸也不收缩，宽度完全由内容决定。你看到的“按钮忽宽忽窄”，其实是文字长度、图标、padding 叠加后的真实内容宽度，不是布局失控，是它压根没参与 flex 分配。
为什么加 flex: 1 到按钮上也不总生效？
Bootstrap 3 的 .btn 类自带 white-space: nowrap 和固定 padding，这会让 flex-basis 计算异常——尤其 Safari 下，flex: 1 可能被解释为“尽可能撑开”，而不是“均分剩余空间”。更关键的是，.btn 没设 box-sizing: border-box，它的 width 计算包含 padding 和 border，而 flex 布局又默认以 content-box 为基准，导致尺寸预期错乱。
- 必须显式给按钮加
box-sizing: border-box - 推荐用
flex: 1 0 0（即flex-grow: 1; flex-shrink: 0; flex-basis: 0），让所有按钮从零开始均分空间 - 若按钮内含图标或长文本，额外加
min-width: 0防止 Safari 触发min-content保护机制
兼容 Bootstrap 3 栅格与现代 Flex 的安全写法
别直接把 .btn 塞进裸 div 并加 display: flex。Bootstrap 3 的 .row 本身不是 flex 容器，强行套用会破坏负 margin 行为；而自己写 flex 容器又绕过了栅格断点控制。稳妥路径是：
- 外层保留
.row+.col-*结构，确保响应式基础 - 在
.col内部再嵌一层div，加自定义类如.btn-flex-group，并设display: flex - 按钮统一加
class="btn flex-fill"（需自行定义.flex-fill { flex: 1 0 0; min-width: 0; }） - 避免使用
.btn-block：它设的是width: 100%，和 flex 冲突，且在小屏下强制独占一行
IE11 下按钮宽度塌缩的隐藏陷阱
IE11 对 flex-basis: 0 支持不完整，只写 flex: 1 0 0 可能被忽略，导致按钮退回内容宽度。必须双保险：
- 按钮样式里显式写
width: 0或min-width: 0 - 同时保留
flex-basis: 0和flex: 1 0 0 - 若用百分比宽度（如
flex-basis: 25%），IE11 会误读为flex-shrink: 25，务必加空格分隔：flex: 1 0 25%
最易被忽略的是：你改了按钮的 flex 行为，但没同步检查其父容器是否设置了 min-width: 0 —— 尤其当它嵌在 .input-group 或 .card-footer 这类有隐式最小宽度限制的组件里时，按钮照样会被卡住。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
