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>

您可以通过此网址查看我的代码。 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>

行中的Bootstrap复选框未对齐

1 个答案: