ng-bootstrap模态尺寸 [英] ng-bootstrap Modal size

问题描述

为模态设置/覆盖自定义宽度的最佳方法是什么?

What is the best way to set/override a custom width for a modal?

似乎ng-bootstrap当前支持

It seems ng-bootstrap currently supports

大小:"sm" | 'lg'

size: 'sm' | 'lg'

但是Bootstrap 4支持sm，md和lg.

but Bootstrap 4 supports sm, md and lg.

理想情况下，我希望模式能够响应并根据容器大小进行调整.并在手机上全屏显示.

Ideally I would like the modal to be responsive and adjust similar to container sizes. And on mobile have it go full screen.

编辑:引导程序4 _variables.scss似乎具有$ modal-md设置，但似乎未使用.

Bootstrap 4 _variables.scss seems to have a $modal-md setting but appears to be unused.

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

推荐答案

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

The cleanest solution that I could find is to use the windowClass property.

即:

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

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

Then add the following to your global CSS styles. This is important as the style won't be picked up from your components CSS.

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

这篇关于ng-bootstrap模态尺寸的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！