css - Bootstrap "form-horizontal"和标签

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 div 包装在一个具有 form-group 类的新容器 div 中。

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

工作 fiddle : <强> http://jsfiddle.net/jo0b6yod/2/