带Bootstrap的HTML :按钮右对齐，div在新行居中

Question

在我的网页中(使用Bootstrap)，我需要在新的一行中显示一个右对齐的按钮和一个居中的微调器。

但我把旋转器放在同一条线上，在剩下的线上居中...

我的代码：

<div>
  <button type="button" class="btn btn-primary mt-4 float-right">Text</button>
</div>  

<div class="text-center mt-4">
  <div class="spinner-border" role="status"></div>
</div>

我做错了什么？

谢谢,

迭戈

Answer 1

您可以使用Bootstrap's grid system并定义两个具有全宽列的行。我将margin-top mt-4移到了第二个.row，以便为整行提供该边距。

​

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col">
      <button type="button" class="btn btn-primary mt-4 float-right">Text</button>
    </div>
  </div>
  <div class="row mt-4">
    <div class="col text-center">
      <div class="spinner-border" role="status"></div>
    </div>
  </div>  
</div>

​

为了将您的<button>放在最右边，只需移除<div class="container">即可。有关更多信息，请阅读this。

当然，还有其他几种选择来接收期望的结果，例如，使用equal-width multi-lines

​

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col">
      <button type="button" class="btn btn-primary mt-4 float-right">Text</button>
    </div>
    <div class="w-100"></div>
    <div class="col mt-4 text-center">
      <div class="spinner-border" role="status"></div>
    </div>
  </div>  
</div>

​

祝好运!