按钮宽度默认随文字自适应，因 Bootstrap .btn 使用 display: inline-block；需避免手动设宽、text-nowrap 或父容器拉伸，图标应设 vertical-align: -0.125em 对齐，超长文案宜用 text-truncate 或服务端截断。
按钮宽度随文字长度自适应，不是靠 Bootstrap 类控制
bootstrap 的 .btn 默认就是「内容宽度」——它用 display: inline-block，天然根据文字、图标、空格撑开宽度。你不需要加任何类，也不该加 .btn-block 或 width: 100%，否则就破坏了这个行为。
常见误操作是手动设 width、min-width 或用 text-nowrap 强制单行，结果反而让按钮变宽或文字溢出。真要“随文字自动调整”，就得确保：
-
white-space: normal（默认值，允许换行）；如果文字过长需强制单行，才加text-nowrap，但必须同步控制容器宽度或字体大小 - 不设置
width、min-width、max-width等尺寸限制属性 - 避免父容器有
flex+flex-grow: 1或grid自动拉伸布局，它们会把按钮撑满 - 图标内联时用
<i class="bi bi-x"></i>而非<span><i></i></span>，多余标签会引入不可控的空白和盒模型偏差
文字太长导致按钮过宽？优先裁剪或换行，而非缩放
按钮宽度随文字增长没有上限，实际项目中常遇到超长文案（如动态生成的 API 错误信息）把按钮撑到屏幕外。这时不能靠“自适应缩放”解决，而是要控制内容呈现方式：
- 用
text-truncate类实现省略号：<button class="btn btn-primary text-truncate" style="max-width: 200px;"></button>—— 注意必须配max-width和display: inline-block（.btn已满足） - 允许合理换行：移除
text-nowrap，给按钮加word-break: break-word或overflow-wrap: break-word，对中英文混合更稳妥 - 服务端/组件层截断文案，比前端 CSS 强控更可靠；例如 Vue 中用
{{ text.slice(0, 20) + '...' }} - 避免在按钮里塞完整路径、堆叠多个
<span></span>或带margin的图标——这些都会悄悄加宽
图标+文字组合时高度不齐？必须同步 vertical-align
即使宽度自适应了，带图标的按钮仍可能比纯文本按钮高 1–2px，这是图标字体 baseline 和 line-height 不匹配导致的。这不是“大小没设对”，而是渲染细节没控住：
-
.btn i或.btn svg必须设vertical-align: -0.125em（Bootstrap 5 图标推荐值），不能依赖默认baseline - 统一
line-height：在自定义按钮类里锁死，比如line-height: 1.28571429（≈18px / 14px），避免继承浮动值 - 图标用
font-size: 0.875em（即当前按钮字号的 87.5%），而不是固定像素，否则响应式下会错位 - 检查是否有隐藏空格：
<button>保存<i></i></button>比<button>保存<i></i></button>多一个空格字符，就会多出 2px 宽度
想让所有按钮等宽？那就放弃“随文字自适应”
如果设计要求一组按钮视觉对齐（如操作栏里的「编辑」「删除」「复制」），就不能依赖文字长度驱动宽度。此时必须主动放弃自适应，改用显式约束：
- 给整组按钮加
btn-group，再设min-width: 80px或flex: 1（需父容器为flex） - 用
text-center+ 固定width（如width: 100px），配合text-truncate防溢出 - 最稳方案：新建类
.btn-equal，锁死min-width、padding、font-size，并加!important确保覆盖 Bootstrap 默认权重 - 注意：等宽后，短文案按钮会出现“文字居中但左右留白过大”的问题，需同步调
padding-left/padding-right或改用justify-content: center（flex 布局下）
真正难的不是写一行 width: fit-content，而是分清场景——文字长度不可控时让它自适应；UI 要求对齐时，就得用确定性规则覆盖它。这两者无法共存于同一组按钮上。
