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

我有一个包含输入和提交按钮的简单表单。我使用bootstrap进行响应。当屏幕大小为

md

时，我希望输入字段与输入对齐，因为

标签设置为
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>


标签
多恩

参见演示
这就是您要找的吗

<form method="post" class="form-horizontal" role="form">
    <div class="form-group">
        <label for="inputEmail3" class="col-sm-2 control-label">Label</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" id="inputEmail3" name="name" />
        </div>
    </div>
    <div class="form-group" style="height: 50px;">
        <div class="col-md-offset-10 col-md-2">
            <input type="submit" class="btn btn-success" value="Submit"></input>
        </div>
    </div>
</form>


标签

问题在于，您有两个表单组包围了提交按钮，它从左侧一闪而过



标签
多恩
我认为情况并非如此，以下是我切换时发生的情况：。张贴代码
<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>