表单输入和提交按钮未对齐
Form input and submit button not aligned
我有一个包含输入和提交按钮的简单表单。我使用 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
这是您要找的吗?
<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/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>
我有一个包含输入和提交按钮的简单表单。我使用 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
这是您要找的吗?
<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/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>