模态宽度内联 CSS 引导程序

【问题标题】：Modal width inline CSS bootstrap模态宽度内联 CSS 引导程序
【发布时间】：2021-04-07 03:28:20
【问题描述】：

我需要自定义模态框的宽度（需要使其大于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>

【问题讨论】：

标签： html css bootstrap-4 modal-dialog

【解决方案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%;">

参考 -> Modal width (increase)

【讨论】：