Css 将按钮与引导3在水平窗体布局下方居中对齐

我有下面的布局，这里是一个布局图

<div class="container-fluid" >    
  <div class="row">
    <div class="col-xs-12 col-sm-5">
      <label><strong>Field One</strong></label>
      <div class="form-group">
        <input type="text" class="form-control">
      </div>
    </div>

    <div class="col-xs-12 col-sm-1">
      <div class="invisible hidden-xs" style="padding-top: 11px">
        &nbsp;
      </div>
      <div class="form-group">
        <strong>OR</strong>
      </div>
    </div>

    <div class="col-xs-12 col-sm-4">
      <label><strong>Other Field</strong></label>
      <div class="form-group">
        <input type="text" class="form-control">
      </div>
    </div>
  </div>
  <div class="row text-center">
    <div class="col-sm-12">
      <button class="btn btn-primary" type="button">Button</div>
    </div>
  </div>
</div>

字段一
或
其他字段
按钮

在非移动模式下，我希望输入占用尽可能多的空间，或标签位于输入之间

---

然后，我需要将按钮居中，但我遇到了一些困难，因为我希望输入为col-sm-5和col-sm-6，但由于这是奇数列，因此很难将按钮居中。

要将按钮与表单对齐，请在其上添加5的偏移量。添加class

col-md-offset-5

并按下按钮

col-md-1

。让

col-sm

类保持原样。这将始终对齐表单中“或”下方的按钮。希望有帮助