Bootstrap 3表单 - 水平表单的内联字段

Question

我已经经历了一堆示例，我无法在正确的方式中找到明确的答案。我认为我的问题是由输入群组...

什么是正确的方式来编码水平形式内嵌字段？例如

Name: [name  ] 
Address: [address  ] 
Radio: o one o two o three 
Dates: [from |a] to [to |b] 

的文档好像说包围在一类=形式，内联，但在现场组的情况下，内联领域，它似乎并没有工作...

单选按钮格式会有点混乱。但日期字段总是包装。

我可以想到几种方法将它变成工作。但我真的很想知道修复它的“正确”方法。

请参见：http://jsfiddle.net/pcarroll/2uDYz/4/

任何人？

Answer 1

单选按钮，您可以修改<div class="radio">到<div class="radio radio-inline">

对于您使用COL-XS的变化的其他元素

http://jsfiddle.net/2uDYz/6/

Answer 2

你并不需要包装，如无线电元件那。删除div换行并将.radioinline或.checkbox内联应用于标签。这是做到这一点的正确方法。

http://jsfiddle.net/2uDYz/9/

<div class="form-group"> 
    <label class="control-label col-xs-3" for="type">Offer type</label> 
    <div class="col-xs-9"> 
     <label class="radio-inline"> 
      <input name="type" type="radio" value="One"> One 
     </label> 
     <label class="radio-inline"> 
      <input name="type" type="radio" value="One"> Two 
     </label> 
    </div> 
</div> 

对于日期的投入，因为你正在使用的输入组，我会山坳包装控制它们。

<div class="form-group"> 
     <label class="control-label col-xs-3" for="fromdate">Available from</label> 
     <div class="col-xs-9"> 
      <div class="row"> 
       <div class="col-xs-6"> 
        <div class="input-group"> 
         <input class="form-control datepicker" name="fromdate" type="text" value="2014-01-01"> 
         <div class="input-group-addon"> X </div> 
        </div>     
       </div> 
       <div class="col-xs-6"> 
        <div class="input-group"> 
         <input class="form-control datepicker" name="todate" type="text" value="2014-01-01"> 
         <div class="input-group-addon"> Y </div> 
        </div>     
       </div> 
      </div> 
     </div> 
    </div>