Bootstrap Checkbox in Zeile nicht ausgerichtet

Question

Ich versuche ein Formular zu entwerfen, aber es ist nicht gut geformt. Ich muss es reagieren lassen. Das Kontrollkästchen ist jedoch nicht horizontal ausgerichtet.

<form class="ng-pristine ng-scope ng-pending"> 

    <div class="form-group"> 
    <div class="input-group"> 
     <span class="input-group-addon input_force"><i class="ti-pin"></i></span> 
     <input type="text" id="mapInput" class="form-control input_force_text_edit ng-pristine ng-untouched ng-isolate-scope ng-pending ng-empty" value="" g-places-autocomplete="" placeholder="Please enter drop off address WITHOUT Apt/Suite number" ng-model="order.drop_off_address" 
     name="drop_off_address" autocomplete="off" validator="required" aria-invalid="false"><span></span> 
     <input type="text" id="drop_off_address_line_2" class="form-control ng-pristine ng-untouched ng-valid ng-empty" placeholder="Apartment/Suite etc." ng-model="order.drop_off_address_line_2" name="drop_off_address_line_2" autocomplete="off" aria-invalid="false"> 
    </div> 
    </div> 
    <div class="row"> 
    <div class="form-group" style="display: block; width: 100%;"> 
     <div class="col-sm-8"> 

     <div class="input-group" style="width: 100%;"> 
      <span class="input-group-addon"><i class="ti-mobile"></i></span> 
      <input type="text" id="message_for_driver" class="form-control " placeholder="Message For Driver" ng-model="order.message_for_driver" name="message_for_driver" autocomplete="off" aria-invalid="false" style=" width: 100%;"> 
     </div> 
     </div> 

     <div class="col-md-3"> 
     <div class="checkbox"> 
      <label > 
      <input type="checkbox" style="" id="is_ok_to_leave_at_the_door" class="form-control ng-pristine ng-untouched ng-valid ng-empty" checked="checked" ng-model="order.is_ok_to_leave_at_the_door"> Ok to leave at the door 
      </label> 
     </div> 


     </div> 
    </div> 
    </div> 

</form> 

können Sie meinen Code über diese URL auschecken. https://jsfiddle.net/ahmeric/Lrgdk6uh/

Answer 1

Hier ist die Lösung. Sie können den zugehörigen Teil in dieser URL sehen. https://jsfiddle.net/ahmeric/Lrgdk6uh/5/

<form class="ng-pristine ng-scope ng-pending"> 
    <div class="form-group"> 
    <div class="input-group"> 
     <span class="input-group-addon input_force"><i class="ti-pin"></i></span> 
     <input type="text" id="mapInput" class="form-control input_force_text_edit ng-pristine ng-untouched ng-isolate-scope ng-pending ng-empty" value="" g-places-autocomplete="" placeholder="Please enter drop off address WITHOUT Apt/Suite number" ng-model="order.drop_off_address" 
     name="drop_off_address" autocomplete="off" validator="required" aria-invalid="false"><span></span> 
     <input type="text" id="drop_off_address_line_2" class="form-control ng-pristine ng-untouched ng-valid ng-empty" placeholder="Apartment/Suite etc." ng-model="order.drop_off_address_line_2" name="drop_off_address_line_2" autocomplete="off" aria-invalid="false"> 
    </div> 
    </div> 
    <div class="row mb-5"> 
     <div class="form-group"> 
     <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12"> 
      <div class="input-group"> 
      <span class="input-group-addon"><i class="ti-mobile"></i></span> 
      <input type="text" id="message_for_driver" class="form-control " placeholder="Message For Driver" ng-model="order.message_for_driver" name="message_for_driver" autocomplete="off" aria-invalid="false" > 
      </div> 
     </div> 
</div> 
<div class="form-group ml-20"> 
     <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12 pull-right pt-5"> 
      <div> 
      <label class="checkbox-inline"> 
      <input type="checkbox" style="" id="is_ok_leave_at_the_door" checked="checked" ng-model="order.is_ok_leave_at_the_door"> Ok to leave at the door 
      </label> 
     </div> 
     </div> 
     </div> 
</div> 

</form>