Bootstrap「form-horizo​​ntal」和標籤

Question

我有用bootstrap創建「form-horizo​​ntal」的麻煩。

http://jsfiddle.net/frauger/jo0b6yod/

正如你可以在的jsfiddle標籤 「出生日期」 未正確上面的排列看 「出生日期選擇」

<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> 

感謝

Answer 1

將您現有的所有select divs包裝在一個新的容器中div即form-group cl屁股。

<div class="form-group"> 
    <div class="col-xs-4"> 
     <select type="text" class="form-control" id="field-day" required> 
      <option>DD</option> 
     </select> 
    </div> 
    <div class="col-xs-4"> 
     <select type="text" class="form-control" id="field-month" required> 
      <option>MM</option> 
     </select> 
    </div> 
    <div class="col-xs-4"> 
     <select type="text" class="form-control" id="field-year" required> 
      <option>YYY</option> 
     </select> 
    </div> 
</div> 

工作小提琴： http://jsfiddle.net/jo0b6yod/2/

Answer 2

包括div標籤內的標籤，應該做一個塊級內的標籤，並在其父100％需要。

例如：

<div class="form-group"> 
    <div><label for="birthday" class="col-xs-3 col-sm-2 control-label">Birthday</label></div> 
    <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>