twitter-bootstrap Bootstrap Form 标签和文本框排列
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15077851/
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
Bootstrap Form Label and text box arrangement
提问by Stranger
I have the following code:
我有以下代码：
<fieldset>
<legend> Personal Details </legend>
<form class =" form-inline well span9" >
<label> Last Name </label>
<input type="text" class = "span2" placeholder = "Type Last Name"/>
<label> Middle Name </label>
<input type="text" class = "span2"/>
<label> First Name </label>
<input type="text" class = "span2"/><br/>
<label> NickName</label>
<input type="text" class = "span2"/>
<label>Gender</label>
<span class="controls span2">
<select id="select01" style="width:100%;">
<option>Male</option>
<option>Female</option>
</select>
</span>
</form>
What happens is that the label for Gender appears AFTER the Alias label and text field. Can someone please explain how to fix this issue?
发生的情况是性别标签出现在别名标签和文本字段之后。有人可以解释一下如何解决这个问题吗？
Thanks.
谢谢。
回答by Shail
You can create your form in question the following way :
Here's a jsfiddle for http://jsfiddle.net/shail/sGgKE/
您可以通过以下方式创建有问题的表单：
这是http://jsfiddle.net/shail/sGgKE/的 jsfiddle
Jsfiddle with 3 column form http://jsfiddle.net/shail/ykpr5/show
具有 3 列形式的 Jsfiddle http://jsfiddle.net/shail/ykpr5/show
Edit : As per request in comment : Three column form with bootstrap
编辑：根据评论中的要求：带引导程序的三列表格
<form class="well span9">
<div class="row">
<div class="span3">
<label>First Name</label>
<input type="text" class="span3" placeholder="Your First Name">
<label>Last Name</label>
<input type="text" class="span3" placeholder="Your Last Name">
</div>
<div class="span3">
<label>Nickname</label>
<input type="text" placeholder="Nickname" class="span3">
<label>Email Address</label>
<input type="text" class="span3" placeholder="Your email address">
</div>
<div class="span3">
<label>Gender</label>
<select name="Gender" id="DropdownGender" class="span3">
<option value="">Male</option>
<option value="">Female</option>
</select>
</div>
</form>
Regular form alignment
正则表格对齐
<div class="well span9">
<form id="form-inline">
<fieldset>
<legend>Personal Details</legend>
<label>Last name</label>
<input type="text" placeholder="Smith" class="input-xlarge">
<label>Middle Name</label>
<input type="text" placeholder="K" class="input-xlarge">
<label>First Name</label>
<input type="text" placeholder="John" class="input-xlarge">
<label>Nickname</label>
<input type="text" placeholder="Nickname" class="input-xlarge">
<label>Gender</label>
<select name="Gender" id="DropdownGender" class="input-xlarge">
<option value="">Male</option>
<option value="">Female</option>
</select>
</fieldset>
</form>
</div>
