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

时间:2015-02-03 13:35:24

标签: html css twitter-bootstrap twitter-bootstrap-3

我有一个包含输入和提交按钮的简单表单。我使用bootstrap来响应。当屏幕尺寸为md时,我希望输入字段与输入对齐,因为label设置为col-md-2,输入为col-md-10,提交为{ {1}}偏移量为col-md-10。对齐并没有按照我预期的方式发生,任何想法为什么会发生这种情况?

更新

col-md-offset-2

请参阅演示here

2 个答案:

答案 0 :(得分:2)

问题是你有两个表单组,它们包含你的提交按钮,从左边只是一根头发。

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>

答案 1 :(得分:0)

这是你正在寻找的吗?

<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>

http://jsfiddle.net/f4u6g0zh/