twitter-bootstrap 引导表单输入字段对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14526203/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-10-21 16:11:56 来源:igfitidea点击:
bootstrap form input fields alignment
提问by Bujji
I have the below code
我有以下代码
<form id="editProfileForm" class="form-horizontal span8" method="post">
<div class="control-group">
<label class="control-label" for="inputSubject">Subject</label>
<div class="controls">
<input type="text" id="inputSubject" class="span8" >
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputTags">Tags</label>
<div class="controls">
<input type="text" id="inputTags" class="span3">
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputAccess">access</label>
<div class="controls">
<input type="text" id="inputAccess" class="span3">
</div>
</div>
I am getting the form like below 
我得到如下表格
Could some one suggest me how to get like below ? Thanks for your help
有人可以建议我如何像下面这样吗？谢谢你的帮助
JS Fiddle link http://jsfiddle.net/kLuB3/331/
回答by Sara
form-inlinewould be better suited for this than form-horizontal.
form-inline将比form-horizontal.
Try this:
试试这个：
<form id="editProfileForm" class="span8 form-inline" method="post">
<div class="row">
<label class="span1" for="inputSubject">Subject</label>
<input type="text" id="inputSubject" class="span7">
</div>
<div class="row">
<label class="span1" for="inputTags">Tags</label>
<input type="text" id="inputTags" class="span3">
<label class="span1" for="inputAccess" id="inputAccessLabel">access</label>
<input type="text"id="inputAccess" class="span3">
</div>
</form>
With this CSS:
使用这个 CSS：
#inputTags, #inputAccess {
float: left !important;
}
#inputAccessLabel {
margin-left: 35px;
margin-right: 5px;
}
