在twitter引导中水平表单内嵌表单？

什么是最好的方式来devise一个表格，看起来像这样（请参阅下面的链接）在twitter引导没有任何自制的类？

是否有可能像在下面的例子中一样在一个表单内部设置一个内部的form-inline：

Answer 1

不要嵌套<form>标签，这将无法正常工作。 只需使用Bootstrap类。

Bootstrap 3

 <form class="form-horizontal" role="form"> <div class="form-group"> <label for="inputType" class="col-md-2 control-label">Type</label> <div class="col-md-3"> <input type="text" class="form-control" id="inputType" placeholder="Type"> </div> </div> <div class="form-group"> <span class="col-md-2 control-label">Metadata</span> <div class="col-md-6"> <div class="form-group row"> <label for="inputKey" class="col-md-1 control-label">Key</label> <div class="col-md-2"> <input type="text" class="form-control" id="inputKey" placeholder="Key"> </div> <label for="inputValue" class="col-md-1 control-label">Value</label> <div class="col-md-2"> <input type="text" class="form-control" id="inputValue" placeholder="Value"> </div> </div> </div> </div> </form> 

你可以用很多方式来实现这个行为，这只是一个例子。 在这个bootply上testing它

Bootstrap 2

 <form class="form-horizontal"> <div class="control-group"> <label class="control-label" for="inputType">Type</label> <div class="controls"> <input type="text" id="inputType" placeholder="Type"> </div> </div> <div class="control-group"> <span class="control-label">Metadata</span> <div class="controls form-inline"> <label for="inputKey">Key</label> <input type="text" class="input-small" placeholder="Key" id="inputKey"> <label for="inputValue">Value</label> <input type="password" class="input-small" placeholder="Value" id="inputValue"> </div> </div> </form> 

请注意，我正在使用.form-inline来获取.controls中的propper样式。
你可以在这个 jsfiddle上testing它

Answer 2

对于自举3上面的例子工作，但是过于复杂，而不是使用form-group使用form-inline为你想内联的领域。

例如：

 <div class="form-group"> <label>CVV</label> <input type="text" size="4" class="form-control" /> </div> <div class="form-inline"> <label>Expiration (MM/YYYY)</label><br> <input type="text" size="2" class="form-control" /> / <input type="text" size="4" class="form-control" /> </div> 

Answer 3

这使用twitter引导3.x与一个CSS类获取标签坐在input顶部。 这里有一个小提琴的链接 ，确保扩大结果面板足够的效果。

HTML：

  <div class="row myform"> <div class="col-md-12"> <form name="myform" role="form" novalidate> <div class="form-group"> <label class="control-label" for="fullName">Address Line</label> <input required type="text" name="addr" id="addr" class="form-control" placeholder="Address"/> </div> <div class="form-inline"> <div class="form-group"> <label>State</label> <input required type="text" name="state" id="state" class="form-control" placeholder="State"/> </div> <div class="form-group"> <label>ZIP</label> <input required type="text" name="zip" id="zip" class="form-control" placeholder="Zip"/> </div> </div> <div class="form-group"> <label class="control-label" for="country">Country</label> <input required type="text" name="country" id="country" class="form-control" placeholder="country"/> </div> </form> </div> </div> 

CSS：

 .myform input.form-control { display: block; /* allows labels to sit on input when inline */ margin-bottom: 15px; /* gives padding to bottom of inline inputs */ } 

Answer 4

我知道这是一个古老的答案，但这是我通常做的：

CSS：

 .form-control-inline { width: auto; float:left; margin-right: 5px; } 

然后将要内联的字段包装在一个div中，并将.form-control-inline添加到input，例如：

HTML

 <label class="control-label">Date of birth:</label> <div> <select class="form-control form-control-inline" name="year"> ... </select> <select class="form-control form-control-inline" name="month"> ... </select> <select class="form-control form-control-inline" name="day"> ... </select> </div>