按钮加 spinner-border 变形因 spinner 是无约束行内元素且不参与盒模型；需父按钮设 position: relative、overflow: hidden，spinner 用 absolute 居中，尺寸用 em 单位联动 font-size。
按钮加 spinner-border 为什么一加就变形？
直接给 <button> 加 spinner-border 类，按钮会突然变高、文字上移、边框错位——因为 spinner 是行内元素，默认没有尺寸约束，且不参与按钮的盒模型计算。
- 必须用
position: relative包裹按钮（比如给<button>自身加），否则绝对定位的 spinner 找不到定位上下文 - spinner 必须设
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)居中，不能靠 margin 或 text-align - 父按钮要加
overflow: hidden，防止 spinner 溢出或干扰点击区域 - 别用
width: 2rem这种固定值——按钮大小随font-size和padding变，em 单位才联动；btn-md对应1.5em，btn-sm用1.2em
JS 控制加载状态时最常漏的三件事
纯 CSS 搞不定加载态切换：spinner 显示/隐藏、按钮禁用、文字显隐必须同步，否则用户能点、文字还堆在 spinner 上面。
- 加载开始时，必须同时设置
button.disabled = true，否则键盘仍可回车触发 - 原按钮里的文字不能只靠
visibility: hidden，得确保它不占空间（推荐span包文字，再用display: none） - 取消加载（如请求失败）后，要手动恢复
disabled状态、移除 spinner 节点、还原文字——Bootstrap 不自动管这个
spinner-border 和 spinner-grow 在按钮里怎么选？
不是风格偏好问题，是识别效率和视觉干扰的权衡。
-
spinner-border有明确旋转方向+环形轮廓，用户一眼认出“正在转”，适合主操作按钮（如提交、保存） -
spinner-grow是中心缩放脉冲，动画更轻，但弱光或小尺寸下易被忽略，更适合工具栏里的次要按钮（如刷新列表） - 两者都需配
role="status"和aria-hidden="true"（对 spinner 本身），否则读屏器会重复读“loading loading”
要不要自己写 CSS 动画替代 Bootstrap spinner？
当默认 spinner 颜色/速度/大小和设计系统严重冲突时，可以，但别为了“轻量”硬造轮子。
- 自定义动画要重写
@keyframes spin，且必须保证transform-origin: center，否则旋转偏心 - 避免用
scale()缩放 spinner 元素——会导致边框抗锯齿模糊，尤其在高清屏上明显 - 如果项目已用 Bootstrap 5，优先改
$spinner-width等 Sass 变量重编译，比全局覆盖 CSS 更稳
