Question

我在bootstrap 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>

那行得通。

Bootstrap 3.1窗体-水平按钮组问题

1 个答案: