Html 内联表单嵌套在 Bootstrap 3 中的水平表单中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18429121/
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
Inline Form nested within Horizontal Form in Bootstrap 3
提问by Scottie
I want to build a form in Bootstrap 3 like this:
我想在 Bootstrap 3 中构建一个表单，如下所示：
My site (not the above link) just updates from Bootstrap 2.3.2 and the format is not correct anymore.
我的网站（不是上面的链接）只是从 Bootstrap 2.3.2 更新，格式不再正确。
I cannot find any doc about this type of form on getbootstrap.com.
我在getbootstrap.com上找不到关于此类表单的任何文档。
Could anyone tell me how to do this? Only 'Username' would be OK.
谁能告诉我如何做到这一点？只有“用户名”就可以了。
Thanks.
谢谢。
PSThere is a similar questionbut it's using Bootstrap 2.3.2.
PS有一个类似的问题，但它使用的是 Bootstrap 2.3.2。
回答by edsioufi
I have created a demofor you.
我已经为你创建了一个演示。
Here is how your nested structure should be in Bootstrap 3:
下面是你的嵌套结构在 Bootstrap 3 中的样子：
<div class="form-group">
<label for="birthday" class="col-xs-2 control-label">Birthday</label>
<div class="col-xs-10">
<div class="form-inline">
<div class="form-group">
<input type="text" class="form-control" placeholder="year"/>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="month"/>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="day"/>
</div>
</div>
</div>
</div>
Notice how the whole form-inlineis nested within the col-xs-10div containing the control of the horizontal form. In other terms, the whole form-inlineis the "control" of the birthday label in the main horizontal form.
注意整个form-inline是如何嵌套在col-xs-10包含水平表单控件的div 中的。换句话说，整体form-inline就是主要横向形式的生日标签的“控制”。
Notethat you will encounter a left and right margin problem by nesting the inline form within the horizontal form. To fix this, add this to your css:
请注意，将内联表单嵌套在水平表单中会遇到左右边距问题。要解决此问题，请将其添加到您的 css 中：
.form-inline .form-group{
margin-left: 0;
margin-right: 0;
}
回答by Dan
Another option is to put all of the fields that you want on a single line within a single form-group.
另一种选择是将您想要的所有字段放在单个form-group.
<form class="form-horizontal">
<div class="form-group">
<label for="name" class="col-xs-2 control-label">Name</label>
<div class="col-xs-10">
<input type="text" class="form-control col-sm-10" name="name" placeholder="name"/>
</div>
</div>
<div class="form-group">
<label for="birthday" class="col-xs-3 col-sm-2 control-label">Birthday</label>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder="year"/>
</div>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder="month"/>
</div>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder="day"/>
</div>
</div>
</form>
回答by dbinott
This Bootplyexample seems like a much better option. Only thing is that the labels are a little too high so I added padding-top:5pxto center them with my inputs.
这个Bootply示例似乎是一个更好的选择。唯一的问题是标签有点太高了，所以我添加padding-top:5px了它们以我的输入居中。
<div class="container">
<h2>Bootstrap Mixed Form <p class="lead">with horizontal and inline fields</p></h2>
<form role="form" class="form-horizontal">
<div class="form-group">
<label class="col-sm-1" for="inputEmail1">Email</label>
<div class="col-sm-5"><input type="email" class="form-control" id="inputEmail1" placeholder="Email"></div>
</div>
<div class="form-group">
<label class="col-sm-1" for="inputPassword1">Password</label>
<div class="col-sm-5"><input type="password" class="form-control" id="inputPassword1" placeholder="Password"></div>
</div>
<div class="form-group">
<label class="col-sm-12" for="TextArea">Textarea</label>
<div class="col-sm-6"><textarea class="form-control" id="TextArea"></textarea></div>
</div>
<div class="form-group">
<div class="col-sm-3"><label>First name</label><input type="text" class="form-control" placeholder="First"></div>
<div class="col-sm-3"><label>Last name</label><input type="text" class="form-control" placeholder="Last"></div>
</div>
<div class="form-group">
<label class="col-sm-12">Phone number</label>
<div class="col-sm-1"><input type="text" class="form-control" placeholder="000"><div class="help">area</div></div>
<div class="col-sm-1"><input type="text" class="form-control" placeholder="000"><div class="help">local</div></div>
<div class="col-sm-2"><input type="text" class="form-control" placeholder="1111"><div class="help">number</div></div>
<div class="col-sm-2"><input type="text" class="form-control" placeholder="123"><div class="help">ext</div></div>
</div>
<div class="form-group">
<label class="col-sm-1">Options</label>
<div class="col-sm-2"><input type="text" class="form-control" placeholder="Option 1"></div>
<div class="col-sm-3"><input type="text" class="form-control" placeholder="Option 2"></div>
</div>
<div class="form-group">
<div class="col-sm-6">
<button type="submit" class="btn btn-info pull-right">Submit</button>
</div>
</div>
</form>
<hr>
</div>
回答by Max Bertoli
To make it work in Chrome (and bootply) i had to change code in this way:
为了使其在 Chrome（和 bootply）中工作，我必须以这种方式更改代码：
<form class="form-horizontal">
<div class="form-group">
<label for="name" class="col-xs-2 control-label">Name</label>
<div class="col-xs-10">
<input type="text" class="form-control col-sm-10" name="name" placeholder="name" />
</div>
</div>
<div class="form-group">
<label for="birthday" class="col-xs-2 control-label">Birthday</label>
<div class="col-xs-10">
<div class="form-inline">
<input type="text" class="form-control" placeholder="year" />
<input type="text" class="form-control" placeholder="month" />
<input type="text" class="form-control" placeholder="day" />
</div>
</div>
</div>
</form>
回答by Anjana Silva
A much simpler solution, without all the inside form-groupelements
一个更简单的解决方案，没有所有内部form-group元素
<div class="form-group">
<label for="birthday" class="col-xs-2 control-label">Birthday</label>
<div class="col-xs-10">
<div class="form-inline">
<input type="text" class="form-control" placeholder="year" style="width:70px;"/>
<input type="text" class="form-control" placeholder="month" style="width:80px;"/>
<input type="text" class="form-control" placeholder="day" style="width:100px;"/>
</div>
</div>
</div>
... and it will look like this,
...它看起来像这样，
Cheers!
干杯!
回答by theCauldronQueen
I had problems aligning the label to the input(s) elements so I transferred the label element inside the form-inline and form-group too...and it works..
我在将标签与输入元素对齐时遇到了问题，所以我也将标签元素转移到了表单内联和表单组中......并且它有效..
<div class="form-group">
<div class="col-xs-10">
<div class="form-inline">
<div class="form-group">
<label for="birthday" class="col-xs-2 control-label">Birthday:</label>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="year"/>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="month"/>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="day"/>
</div>
</div>
</div>
</div>
