Bootstrap 3.1 форма-горизонтальная проблема группы кнопок - PullRequest
Новая
       13

Bootstrap 3.1 форма-горизонтальная проблема группы кнопок

1 голос
/ 15 марта 2019

Я использую горизонтальную форму в начальной загрузке 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>

1 Ответ

2 голосов
/ 15 марта 2019

Да, .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>

Это сработает.

...