Question

我有以下布局，这里是布局的jsbin

<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，但由于这是奇数列，因此难以使按钮居中。

Answer 1

要将按钮与表单对齐，请为其添加5的偏移量。添加课程col-md-offset-5并按下col-md-1按钮。让col-sm类保持原样。这将始终对齐＆＃39; OR＆＃39;下面的按钮。在你的形式。希望有所帮助。

使用引导程序3将水平表单布局下方的按钮对齐

1 个答案: