html - 表单输入和提交按钮未对齐

Question

我有一个包含输入和提交按钮的简单表单。我使用 Bootstrap 来提高响应能力。当屏幕尺寸为 md 时，我希望输入字段与输入对齐，因为 label 设置为 col-md-2， col-md-10 的输入和 col-md-10 的提交，偏移量为 col-md-offset-2。对齐没有按照我预期的方式发生，知道为什么会这样吗？

更新

<form method="post" class="form-horizontal" role="form">
    <div class="form-group">
        <label for="inputEmail3" class="col-md-2 control-label">Label</label>
        <div class="col-md-10">
          <input type="text" class="form-control" id="inputEmail3" name="name">
        </div>
    </div>

    <div class="form-group" style="height: 50px;">
        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
              <button type="submit" class="btn btn-success">Done</button>
            </div>
        </div>
    </div>
</form>

查看演示 here

Answer 1

问题是您有两个表单组包围着您的提交按钮，这将它从左侧推开一点。

http://jsfiddle.net/m2rcxdx2/4/

<form method="post" class="form-horizontal" role="form">
    <div class="form-group">
        <label for="inputEmail3" class="col-md-2 control-label">Label</label>
        <div class="col-md-10">
          <input type="text" class="form-control" id="inputEmail3" name="name">
        </div>
    </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
              <button type="submit" class="btn btn-success">Done</button>
            </div>
        </div>
</form>