HTML with Bootstrap: 按钮右对齐，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 并用 full-width 列定义两行。我将 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>

祝你好运！

HTML with Bootstrap: 按钮右对齐，div 居中

HTML with Bootstrap: button right aligned and a div centered in a new line

html

button

alignment

bootstrap-4