带有 Bootstrap 的 HTML：按钮右对齐，div 居中在新行中答案

【问题标题】：HTML with Bootstrap: button right aligned and a div centered in a new line带有 Bootstrap 的 HTML：按钮右对齐，div 居中在新行中
【发布时间】：2020-12-07 11:43:00
【问题描述】：

在我的网页中（使用 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>

我做错了什么？

谢谢，

迭戈

【问题讨论】：

标签： html button bootstrap-4 alignment

【解决方案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>

祝你好运！

【讨论】：