Bootstrap 3.1 表单-水平按钮组问题

Question

我在引导程序 3.1 中使用水平形式，其中标签直接位于输入上方。我正在尝试使用附加按钮进行输入，但由于标签增加了行高，因此对齐已关闭。有谁知道如何修理它？ Bootply

<form name="ReservationForm" class="form-horizontal">
  <div class="form-group form-group-sm">                                                                                    
     <!-- Reservation Date -->                                      
     <div class="col-sm-2">
       <label class="control-label required" for="reservationDate"><span class="sr-only">Required</span>Appointment Date</label>
       <input name="reservationDate" class="form-control  dateField hasDatepicker" id="reservationDate" type="text" size="25" readonly="readonly" value="">                                 
     </div>
     <div class="col-sm-3">                                                                                         
       <div class="input-group">
         <label class="control-label" for="reservationStartTime">Appointment Time </label>
         <input class="form-control" id="reservationStartTime" type="text" readonly="true" value="No time slots displayed">                                                                 
         <div class="input-group-btn">
           <input name="actionType" class="btn btn-primary btn-sm" id="actionType" type="submit" value="Search Time Slots">                                                                                                 
         </div>
       </div>
    </div>  
  </div>
</form> 

Answer 1

是的，.control-label 破坏了.input-group，因为<label> 的必须在输入组之外；只需将其移到外面或“上一层”：

<div class="col-sm-3">                                           
  <!-- label moved outside input-group -->                                              
  <label class="control-label" for="reservationStartTime">Appointment Time </label>

  <div class="input-group">
     <input class="form-control" id="reservationStartTime" type="text" readonly="true" value="No time slots displayed">                                                                 
     <div class="input-group-btn">
        <input name="actionType" class="btn btn-primary btn-sm" id="actionType" type="submit" value="Search Time Slots">                                                                                                 
     </div>
  </div>
</div> 

这会起作用的。