html - 是否可以使用 bootstrap 4 在右侧添加偏移量？

Question

使用 Bootstrap 4 布局系统，我可以将我的按钮与文本框对齐吗？

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row justify-content-center mb-4">
  <div class="col col-4">
    <input type="text"/>
  </div>
  <div class="col col-4">
    <input type="text"/>
  </div>
</div>
<div class="row justify-content-center mb-4">
  <div class="col">
  <input type="button" class="btn" value="Go"/>
  </div>
</div>
  

我知道我可以将所有内容都放在同一行中并将按钮对齐到文本框下方...但是我需要使用新的 css 类调整它们之间的间距...我正在寻找更清洁的工具使用现有 bootsrap 4 类的解决方案。

Answer 1

If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line. - Bootstrap

为按钮的列使用 col-8 text-right。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row justify-content-center">
    <div class="col-4 ">
      <input type="text" class="form-control" />
    </div>
    <div class="col-4 ">
      <input type="text" class="form-control" />
    </div>
    <div class="col-8  text-right">
      <button type="button" class="btn btn-primary mt-4">Go</button>
    </div>
  </div>
</div>