带有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>

我做错了什么？

谢谢，

Diego

Answer 1

您可以利用Bootstrap的网格系统定义两行全宽列。我将margin-topmt-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">即可。请阅读本文了解更多信息。

当然，还有几个其他选项可以接收所需的结果，例如，使用等宽多行：

<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>

祝你好运！