直接改 width/height 不起作用，因 Bootstrap 5 的 spinner 尺寸为硬编码 2rem 且 inline-block 显示；正确做法是用 CSS 变量动态缩放并重设 border-width 等关键值。

为什么直接改 width/height 不起作用

Bootstrap 5 的 .spinner-border 和 .spinner-grow 默认宽高是硬编码的 2rem，且用的是 inline-block 显示模式。你写 .my-spinner { width: 1.2rem; height: 1.2rem; } 很可能被原生样式覆盖，尤其当没提高选择器权重或没在 Bootstrap CSS 后加载时。

正确做法：用 CSS 变量配合 rem 缩放

Bootstrap 5 并未暴露 --bs-spinner-size 这类变量，但它的尺寸本质依赖根字号（:root 的 font-size）和 rem 单位。所以真正可控的路径是：动态改 :root 字号 + 局部重置关键硬编码值。

• 给容器加自定义缩放变量，例如：<div class="spinner-container" style="--bs-spinner-scale: 0.8;"> <li>在该容器后代中覆盖 spinner 尺寸：<pre class='brush:php;toolbar:false;'>.spinner-container .spinner-border, .spinner-container .spinner-grow { width: calc(2rem * var(--bs-spinner-scale, 1)); height: calc(2rem * var(--bs-spinner-scale, 1)); }</pre></li> <li>同时重设 <code>border-width（对 .spinner-border 很关键）：border-width: calc(0.25em * var(--bs-spinner-scale, 1));

不同尺寸 Spinner 如何独立控制颜色+大小

如果你要实现「小号蓝、大号红」这种组合，不能只靠全局变量，得把尺寸和颜色解耦。推荐用语义化类名绑定变量：


VPS Bootstrap
从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。
下载
• 定义两组作用域变量：

  .spinner-sm { --bs-spinner-size: 0.75; --bs-spinner-color: #0d6efd; }
  .spinner-lg { --bs-spinner-size: 1.25; --bs-spinner-color: #dc3545; }

• 统一应用尺寸和颜色：

  .spinner-sm .spinner-border,
  .spinner-lg .spinner-border {
    width: calc(2rem * var(--bs-spinner-size, 1));
    height: calc(2rem * var(--bs-spinner-size, 1));
    --bs-spinner-border-color: var(--bs-spinner-color);
  }

• 组合使用：<div class="spinner-sm"><div class="spinner-border"></div></div>

容易被忽略的兼容点

Spinner 的动画中心、边框清晰度、与按钮内嵌时的垂直对齐，全依赖尺寸是否“干净”地参与盒模型计算。写死 px 或滥用 transform: scale() 会破坏这些：

立即学习“前端免费学习笔记（深入）”；

• transform: scale() 不改变实际布局占用，会导致按钮内 spinner 点击区域偏移、旋转中心漂移
• 没同步调整 border-width 时，.spinner-border 在缩小后边框会变粗、模糊
• 如果父容器用了 font-size 覆盖，但没重设 --bs-spinner-border-color，颜色可能失效（因变量继承链断裂）