모달 바닥 글을 모달의 아래쪽으로 이동

Question

Vue, js 및 부트 스트랩을 사용하여 일부 모달을 만들려고했지만 바닥 글이 모달의 맨 아래로 이동하지 않습니다.

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/