将模态页脚移动到模态的底部

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/