モーダルフッタをモーダルの下に移動

Question

私はVue、js、Bootstrapを使用していくつかのモーダルを作成しようとしていますが、フッターはモーダルの底には行かないでしょう。私はモーダルの底にフッターを移動することができますどのように

https://jsfiddle.net/phpMick/mqp40dgm/

？

<div class="modal-mask" transition="modal"> 
    <div class="modal-wrapper"> 
     <div class="modal-container"> 
      <div class="modal-header"> 
       <button type="button" data-dismiss="modal" aria-hidden="true" class="close">×</button> 
       <h4 class="modal-title">Edit Report</h4> 
      </div> 
      <form role="form" class="form-horizontal"> 
       <input type="hidden" name="_method" value="PATCH"> 
       <div class="modal-body"> 
        <div class="row"> 
         <div class="form-group"> 
          <label for="report_type_id" class="col-sm-1 control-label">Type</label> 
          <div class="col-sm-4"> 
           <select id="report_type_id" class="form-control"> 
            <option disabled="disabled" value="">Please select one</option> 
            <option value="1"> datatable</option> 
            <option value="2">jasper</option> 
           </select> 
          </div> 
          <label for="inputArea" class="col-sm-1 control-label">Area</label> 
          <div class="col-sm-4"><select id="inputArea" class="form-control"> 
           <option disabled="disabled" value="">Please select one</option> 
           <option value="2">salesadmin</option> 
           <option value="1">utilitytest</option> 
          </select> 
          </div> 
         </div> 
        </div> 
        <div class="row"> 
         <div class="form-group"> 
          <div class="col-sm-12"> 
           <div class="form-group"><label for="inputTitle" 
                   class="col-sm-1 control-label">Name</label> 
            <div class="col-sm-4"><input type="text" id="inputTitle" required="required" 
                   class="form-control"></div> 
           </div> 
          </div> 
         </div> 
        </div> 
        <div> 
         File Upload 
        </div> 
       </div> 
      </form> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default">Cancel</button> 
       <button type="button" class="btn btn-primary">Save</button> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 1

更新.modal-bodyクラスのCSSと設定min-height:300px

.modal-body { 
    margin: 20px 0; 
    min-height:300px; 
} 

https://jsfiddle.net/pLa63spz/