twitter-bootstrap 标签和文本字段在同一行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19278152/
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
label and text field on same line
提问by user2088016
Can someone take a look at the sample and help me to make label and input fields forizontal? Currently it is label and below it input fild. I need label:input field.
有人可以看一下示例并帮助我制作标签和输入字段吗？目前它是标签，在它下面输入 fild。我需要标签：输入字段。
<div class="row">
<div class="col-xs-6">
<div class="panel panel-primary">
<div class="panel-heading"><h3 class="panel-title">Application Information</h3></div>
<div class="panel-body">
<div class="row">
<div class="col-lg-6 col-lg-6">
<div class ="form-group">
<label for="text" >Contract State</label>
<div class="input-group">
<select name="State" id="State" class="validate[required] form-control">
<option value="">Choose a State</option>
<option value="IL">Illinois</option>
<option value="MN">Minnesota</option>
<option value="WI">Wisconsin</option>
</select>
</div>
</div>
<div class ="form-group">
<label for="text" >Application Number</label>
<div class="input-group">
<input class="validate[required] text-input form-control" type="text" name="AppNumber" id="AppNumber" />
</div>
</div>
</div> <!-- col-lg-6 col close -->
</div> <!-- row close -->
</div> <!-- End of panel Body -->
</div><!-- End of panel -->
</div> <!-- end col-xs-6 -->
How can I align labels righ and controls left with margin gap in between?
如何将标签右对齐和控件左对齐，中间留有边距？
回答by Sumit Raghav
add class in label and give style: float left
在标签中添加类并给出样式：向左浮动
<div class ="form-group">
<label for="text" style="float:left;margin-right:5px;">Application Number</label>
<div class="input-group">
<input class="validate[required] text-input form-control" type="text" name="AppNumber" id="AppNumber" />
</div>
</div>
回答by AndrewL64
Just wrap your form-group in a form-inlineclass like this:
只需将您的表单组包装在这样的form-inline类中：
<form class="form-inline">
<div class ="form-group">
<label for="text" >Application Number</label>
<div class="input-group">
<input class="validate[required] text-input form-control" type="text" name="AppNumber" id="AppNumber" />
</div>
</div>
</form>
P.S. the form-inlinewrapper doesn't necessarily need to be a formtag so you can use a divtag too.
PSform-inline包装器不一定需要是form标签，因此您也可以使用div标签。
回答by angel_navarro
You have multiple solutions for you matter. For example:
您有多种解决方案。例如：
<div style="width: 200px; float: left;">
<label for="text">Application Number:</label>
</div>
<div class="input-group" style="float:left;">
<input class="validate[required] text-input form-control" type="text" name="AppNumber" id="AppNumber" />
</div>
To multiple rows, it can be something like this:
对于多行，它可以是这样的：
<div style="width: 200px; float: left;">
<label for="text">Field 1:</label>
</div>
<div class="input-group" style="float:left;">
<input class="validate[required] text-input form-control" type="text" name="AppNumber" id="AppNumber" />
</div>
<div style="clear:both;"> </div>
<div style="width: 200px; float: left;">
<label for="text">Field 2:</label>
</div>
<div class="input-group" style="float:left;">
<input class="validate[required] text-input form-control" type="text" name="AppNumber" id="AppNumber" />
</div>
<div style="clear:both;"> </div>
<div style="width: 200px; float: left;">
<label for="text">Field 3:</label>
</div>
<div class="input-group" style="float:left;">
<input class="validate[required] text-input form-control" type="text" name="AppNumber" id="AppNumber" />
</div>
<div style="clear:both;"> </div>
