angular - ng-bootstrap 模态大小

Question

设置/覆盖模态框自定义宽度的最佳方式是什么？

貌似ng-bootstrap目前支持

size: 'sm' | 'lg'

但 Bootstrap 4 支持 sm、md 和 lg。

理想情况下，我希望模态能够响应并根据容器大小进行调整。在移动设备上全屏显示。

编辑: Bootstrap 4 _variables.scss 似乎有一个 $modal-md 设置但似乎未被使用。

$modal-lg:                    800px !default;
$modal-md:                    500px !default;
$modal-sm:                    300px !default;

Answer 1

我能找到的最干净的解决方案是使用 windowClass 属性。

即:

this.modalService.open(MyModalComponent,  { windowClass : "myCustomModalClass"});

然后将以下内容添加到您的全局 CSS 样式中。这很重要，因为样式不会从您的组件 CSS 中获取。

.myCustomModalClass .modal-dialog {
  max-width: 565px;
}