按钮加 spinner-border 后变高、文字上移，是因 spinner 默认为行内元素且不参与盒模型；需给按钮设 position: relative 和 overflow: hidden，spinner 用绝对定位居中，尺寸用 em 单位适配字体缩放，加载时同步禁用按钮、隐藏文字、插入 spinner，取消时反向恢复，且 spinner-border 比 spinner-grow 更易识别，必须加 aria-hidden="true"。
按钮加 spinner-border 后突然变高、文字上移？
这不是 bug，是 bootstrap 的 spinner-border 默认为行内元素，没有显式尺寸约束，也不参与按钮的盒模型计算——它会撑开父容器高度，同时把原有文字“顶上去”。
- 必须给
<button></button>自身加position: relative和overflow: hidden -
spinner要用position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)居中，不能靠margin或text-align - 尺寸别写死，比如
width: 2rem；改用1.5em（对应btn-md）或1.2em（对应btn-sm），才能随按钮字体和 padding 缩放
加载开始时 JS 只加 disabled 就完事了？
不行。只设 button.disabled = true 会导致三处错位：键盘仍能回车触发、spinner 上面还压着原文字、用户点不到按钮但看不出为什么——视觉与状态彻底脱节。
- 必须同步操作三项：
button.disabled = true、隐藏原文字节点（推荐用<span></span>包住文字，再display: none）、插入并显示spinner元素 - 取消加载（如请求失败）后，要手动恢复：
button.disabled = false、移除spinner节点、还原文字<span></span>的display - Bootstrap 不接管这些状态切换逻辑，纯 CSS 无法完成闭环
spinner-border 和 spinner-grow 到底该选哪个？
不是看哪个“好看”，是看用户是否能在 0.3 秒内无意识识别出“正在加载”。这是交互效率问题，不是风格偏好。
-
spinner-border有明确旋转方向 + 环形轮廓，识别率高，适合主操作按钮（提交、保存、下单） -
spinner-grow是中心脉冲缩放，动画轻，但在弱光屏、小尺寸按钮或色弱场景下容易被忽略，更适合工具栏里的次要动作（如刷新列表、重试） - 两者都必须加
role="status"和aria-hidden="true"，否则读屏器会重复读 “loading loading”
要不要自己写 CSS 替换 Bootstrap 的 spinner？
除非设计系统对颜色、速度、大小有强一致性要求（比如全站统一用 0.4s 旋转 + #2563eb 主色），否则不建议。手写容易翻车，且维护成本更高。
- 优先改 Sass 变量：
$spinner-width、$spinner-animation-speed，重编译 Bootstrap CSS 更稳 - 若必须自定义动画，
@keyframes spin必须保证transform-origin: center，否则旋转偏心 - 避免用
scale()缩放 spinner 元素——高清屏上边框抗锯齿模糊肉眼可见
disabled 没同步、原文字节点没清理、spinner 尺寸没随 font-size 缩放——这些细节一漏，加载动画就变成 UI bug。
