如何使用Bootstrap内置类替换Spinner组件的top:-30px与margin:0 auto内联样式？

没问题，我来帮你拆解这两个样式的替代方案：

1. 替换 margin: 0 auto; #

Bootstrap 提供了专门的水平居中工具类 mx-auto，它会自动为元素设置 margin-left: auto; margin-right: auto;，完全对应你原来的 margin: 0 auto 效果，而且只作用于左右外边距，不会影响上下边距。

2. 替换 top: -30px; #

Bootstrap 没有直接设置 top 定位偏移的内置类（它的定位工具类主要用来设置 position 属性，比如 position-relative），不过我们可以用负边距类实现类似的向上偏移效果：

• Bootstrap 的负边距类采用 m{t/b/l/r/x/y}-n* 的命名规则，其中 mt-n* 代表负的上边距。
• 你可以根据需求选择接近 -30px 的类：比如 mt-n3 对应 -1.5rem（约 -24px），mt-n4 对应 -2.5rem（约 -40px），可以测试哪个视觉效果最贴合你的需求。
• 如果你仍然需要保留 position: relative 的定位方式，可以加上 Bootstrap 的 position-relative 类来替代内联的 position: relative。

修改后的代码示例 #

这里提供两种常见的写法：

方案一：用负边距替代top偏移（无需相对定位） #

<div class="module-loader2 mx-auto mt-n4">
  <div class="loader-bubble loader-bubble-primary d-block"></div>
</div>

方案二：保留相对定位 + 负边距 #

<div class="module-loader2 position-relative mx-auto mt-n3">
  <div class="loader-bubble loader-bubble-primary d-block"></div>
</div>

内容的提问来源于stack exchange，提问作者user16665949