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>