twitter-bootstrap Twitter Bootstrap - 内联表单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15751616/
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
Twitter Bootstrap - Inline Form
提问by maximus
I have this form:
我有这个表格：
<!-- First Name-->
<div class="control-group">
<label class="control-label">First Name</label>
<div class="controls">
<input id="textinput" name="Product Name" class="input-xlarge" type="text">
</div>
</div>
<!-- Last Name-->
<div class="control-group inline">
<label class="control-label">Last Name</label>
<div class="controls">
<input id="textinput" name="Product Name" class="input-xlarge" type="text">
</div>
</div>
<!-- Telefonnumber-->
<div class="control-group">
<label class="control-label">Telefonnumber</label>
<div class="controls">
<input id="textinput" name="Product Name" class="input-xlarge" type="text">
</div>
</div>
<!-- Street-->
<div class="control-group">
<label class="control-label">Street</label>
<div class="controls">
<input id="textinput" name="Product Name" class="input-xlarge" type="text">
</div>
</div>
I want to display Last Name next to First Name and under these two field the Telefonnumber.
我想在名字旁边显示姓氏，在这两个字段下显示电话号码。
How can I realize this in twitter bootstrap?
我怎样才能在 twitter bootstrap 中实现这一点？
btw the jsfiddle
顺便说一句jsfiddle
回答by Daniel Moses
Bootstraps has a few example form layouts that you can use here.
Bootstraps 有一些示例表单布局，您可以在此处使用。
As per their documentation, use controls-rowwhen you want multiple on a line. (form-inlineis for the whole form to be inline). You will want to read their scaffolding documentationbefore going forward with using their classes.
根据他们的文档，controls-row当您希望一行中有多个时使用。(form-inline是为了使整个表单内联)。在继续使用他们的类之前，您需要阅读他们的脚手架文档。
Updated jsfiddle
更新了jsfiddle
PS.. HTML pointers
PS.. HTML 指针
- Don't duplicate
id(andnameif you can avoid it). For example,id="textinput"should be unique across the entire page. Thenamedoesn't have to be unique, but it's best practice to just match the id. - Add
forattribute to labels.
- 不要重复
id（name如果可以避免的话）。例如，id="textinput"在整个页面中应该是唯一的。将name不必是唯一的，但它是最好的做法，只是匹配的ID。 for为标签添加属性。
