内联表单嵌套在引导程序中的水平表单3
我想在Bootstrap 3中创build一个表单，如下所示：
我的网站（不是上述链接）只是从Bootstrap 2.3.2更新，格式不正确了。
我无法在getbootstrap.com上find关于此类表单的任何文档。
谁能告诉我如何做到这一点？ 只有“用户名”才可以。
谢谢。
PS有一个类似的问题，但它使用Bootstrap 2.3.2。
我为你创build了一个演示 。
这里是你的嵌套结构应该如何在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是主要横向forms的生日标签的“控制”。
请注意 ，通过在水平表单中嵌套内联表单，您将遇到左右边距问题。 要解决这个问题，请添加到您的CSS：
.form-inline .form-group{ margin-left: 0; margin-right: 0; }
另一种select是将所有您想要的字段放在一个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>
这个Bootply例子似乎是一个更好的select。 唯一的问题是标签有点太高，所以我添加了padding-top:5px来将它们与我的input集中在一起。
<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>
我有问题alignment的标签input（S）元素，所以我转移标签元素内部forms和表格组… …，它的工作原理..
<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>
