我想在Bootstrap 3中建立一个表单，如下所示：
我的站点（不是上面的链接）只是从Bootstrap 2.3.2更新，格式不再正确。
我在getbootstrap.com上找不到有关此类型表单的任何文档。
谁能告诉我该怎么做？只有“用户名”可以。
谢谢。
PS有一个类似的问题，但它使用的是Bootstrap 2.3.2。
内联表单嵌套在Bootstrap 3的水平表单中
Answers:
我已经为您创建了一个演示。
这是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>
请注意，整体form-inline是如何嵌套在col-xs-10包含水平形式控件的div中的。换句话说，整体form-inline是主要水平形式中生日标签的“控件”。
请注意，通过将内联表单嵌套在水平表单中，您将遇到左右边距问题。要解决此问题，请将其添加到您的CSS：
.form-inline .form-group{
margin-left: 0;
margin-right: 0;
}
哦，是因为jsfiddle上的屏幕宽度很小。添加类
—
Ruslan Stelmachenko 2013年
col-xs-3以<div class="form-group">解决该问题。
无论如何，为什么要
—
Isaac Betesh 2014年
<div class="form-group">在内部使用form-inline？我没有使用它，而没有任何自定义CSS的边距也可以解决。我想念什么吗？
这种结构似乎无法提供对嵌套字段宽度的任何控制？
—
2014年
另一种选择是将所需的所有字段放在同一行中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>
帮助我一些方法。+1
—
阿卜杜拉·尼拉姆
只要您将字段放入实际上属于它的表单组，此选项就可以很好地工作。考虑
—
matthias 17-10-10
has_error必须在与相同的节点上应用的其他类form-group。当您在表单组中混合使用不同的字段和标签时，该引导程序语义将中断。
这个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>
为了使其能够在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>
其中包含损坏/无效的HTML。
—
2015年
@JimmyObonyoAbor我参加聚会有点晚了……但是你也是，回到2016年。当改革说html无效时，它实际上是无效的……它甚至在你发表评论前一个月就得到了解决
—
Mischa
我在将标签与input（s）元素对齐时遇到了问题，因此我也将label元素转移到了form-inline和form-group内...并且可以正常工作。
<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>
没有所有内部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>
...看起来像这样，
干杯!
year，month而day不是内联，而是放在另一行中。