ブートストラップチェックボックスの行が整列していません

Question

フォームを設計しようとしていますが、整形式ではありません。私はそれを反応させる必要があります。しかし、チェックボックスは水平にうまく整列していません。

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

このURLで私のコードをチェックアウトすることができます。 https://jsfiddle.net/ahmeric/Lrgdk6uh/

Answer 1

ここに解決策があります。このURLに関連する部分が表示されます。 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>