图标不居中是因为.spinner-border默认vertical-align: baseline，与文字基线对齐导致视觉偏下；须用flex居中或显式设vertical-align: middle并微调margin-top。
用 spinner-border 替换按钮文字时，为什么图标不居中？
Bootstrap 5 的 .spinner-border 默认是行内元素，且自带 vertical-align: baseline，和按钮内文字基线对齐，导致视觉上偏下。直接套在按钮里会错位，尤其在 btn-sm 或 btn-lg 中更明显。
实操建议：
- 给 spinner 外层加
div包裹，并设display: flex; align-items: center; justify-content: center; - 或直接给
.spinner-border加vertical-align: middle;+margin-top: -2px;（微调适配不同尺寸） - 避免用
text-center类控制 spinner 对齐——它只作用于文本流，对绝对定位或 flex 子项无效
按钮禁用状态（disabled）下 spinner 不转怎么办？
原生 disabled 会让所有子元素（包括 spinner）失去动画能力，因为浏览器会冻结该节点的 CSS 动画与重绘。这不是 Bootstrap 的 bug，而是 HTML 规范行为。
实操建议：
- 不要用
disabled属性，改用pointer-events: none;+opacity: 0.6;+cursor: not-allowed; - 同时手动添加
.disabled类（Bootstrap 5 的样式类）来复现禁用态视觉效果 - 确保 spinner 的
@keyframes没被父级transform或will-change干扰——某些旧版 Chrome 在 disabled 容器里会跳过动画触发
如何用纯 CSS 实现「文字 → spinner → 文字」的平滑切换？
不能靠 JS 频繁增删 DOM 节点，否则会触发重排；也不能只靠 visibility: hidden 切换，因为 spinner 和文字高度不同，会导致按钮跳动。
实操建议：
- 按钮内部用两个固定高度的容器：
<span class="btn-text">提交</span>和<span class="btn-spinner"></span> - 给两者都设
position: absolute; top: 0; left: 0; width: 100%; height: 100%;，并用z-index控制显隐 - 切换时只改
opacity和pointer-events，配合transition: opacity 0.15s ease-in - spinner 使用
.spinner-border.spinner-border-sm（对应 btn-sm），避免尺寸失配
自定义 spinner 颜色时，border-color 为什么只生效一半？
Bootstrap 5 的 .spinner-border 是用四个独立 border 实现的旋转效果，但默认只设了 border-top-color 和 border-right-color（其余为 transparent），所以只改 border-color 会漏掉两个边。
实操建议：
- 必须显式设置全部四边：
border-top-color: #0d6efd; border-right-color: #0d6efd; border-bottom-color: transparent; border-left-color: transparent; - 或者更稳妥：用
background: conic-gradient(from 0deg, #0d6efd, #0d6efd, transparent 0.1turn);+animation: spin 1s linear infinite;替代原生 spinner - 注意 Safari 对
conic-gradient的兼容性——iOS 15.4+ 才支持，生产环境需加@supports回退
height 必须和文字行高严格一致，否则切换瞬间会有 1px 抖动。别依赖 btn 类的 padding 自动适配——手动写死 min-height 更可靠。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
