模态宽度内联 CSS bootstrap

Question

我需要自定义模态框的宽度（需要让它大于modal-xl）

我的方法如下，但似乎不起作用。

<div class="modal"  id="creditNoteDetailsModal" *ngIf="creditNoteDetails" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog modal-dialog-centered" style="width: 1400px" role="document">
....
....
    </div>
</div>

Answer 1

将此添加到您的 css

   .modal-xl{    
    max-width:80%;    
    }

如果不起作用，只需添加 !important，它看起来如下所示

.modal-xl {
    max-width: 80% !important;
}

并调用 modal-xl。

<div class="modal-dialog modal-xl modal-dialog-centered" role="document">
 <!-- some model content --->
</div>

或如下设置样式表

<div class="modal-dialog modal-xl modal-dialog-centered" role="document" style="max-width: 80%;">

参考 ->

模态宽度内联 CSS bootstrap

Modal width inline CSS bootstrap

html

css

modal-dialog

bootstrap-4