如何在文本旁边放置一个“Spinner”

Question

我有这样的情况：

我希望在文本旁边有一个旋转器（spinner）：

我正在使用 Bootstrap 5（初学者）。我的代码如下：

```

    <template>
  <div>
    <h1 class="mt-3">Organizations</h1>

    <span v-if="isLoading" class="spinner-border text-primary" role="status">
      <span class="visually-hidden">Loading...</span>
    </span>

我尝试了很多方法，但都没有成功：旋转器始终在新行上。

怎么办？

- Dom

Answer 1

这是因为h1元素是块级元素，所以会强制下一个元素在新的一行上显示。

有许多方法可以改变这种情况 - 但最简单的方法是将h1设置为display：inline-block ....

<h1 class="mt-3 d-inline-block">Organizations</h1>

或者包裹它们的 div 添加 display: flex...，可将其设置为弹性盒布局。

  <div class="d-flex">
    <h1 class="mt-3">Organizations</h1>

    <span v-if="isLoading" class="spinner-border text-primary" role="status">
      <span class="visually-hidden">Loading...</span>
    </span>
  </div>

您应该在图标上应用边距，以使其与标题分开。

- gavgrif

---

OP正在使用Bootstrap，所以我会将这些样式更改为Bootstrap的类：class="d-inline-block"和class="d-flex"。 - undefined

Answer 2

最好的解决方案是在CSS中覆盖默认的h1显示属性，即将其从块级元素改为内联块级元素。

只需在您的h1标签中添加一个style属性，如下所示：

 <h1 style="display: inline-block;" class="mt-3">Organizations</h1>

display: block 占据父元素的100%宽度，这就是你的问题所在。

- Raishav Hanspal