MVC 5 - Bootstrap 4 - 模态满（ish）宽度不起作用

Question

在视图中定义了以下模式

 <div id="PopupModalDocuments" class="modal fade in out">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Document Viewer</h4>
                <button class="close" aria-hidden="true" type="button" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" id="ModalBody">
                <iframe id="modalFrame" runat="server" seamless="seamless" height="400" style="width: 95%; max-height: 800px;"></iframe>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" type="button" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

像这样重写CSS

 #PopupModalDocuments {
        top: 5% !important;
        bottom: 5% !important;
    }

     .modal-lg {
        width: 90% !important;
        }

    #PopupModalDocuments .modal-body {
         max-height: 800px !important;
        }

使用modal-lg或模态ID（在先前的bootstrap版本中工作），或两者的组合但仍然看起来像这样（pdf不可读）

关于如何让它发挥作用的任何想法？

由于

Answer 1

已更改

.modal-lg {
        width: 90% !important;
    }

到

 .modal-lg {
        max-width: 90% !important;
    }