更改 ng-bootstrap UI 中的模态大小（角度 2）

Posted 2023-03-06

【中文标题】更改 ng-bootstrap UI 中的模态大小（角度 2）

【英文标题】：Change the modal size in ng-bootstrap UI (angular 2)

【发布时间】：2017-11-22 19:55:40

【问题描述】：

我正在尝试更改我的 ng-bootstrap 模态的大小，我尝试了很多方法，包括 this 和 this 但对我来说没有任何效果！所以任何人都可以给我一些关于如何操作的提示在 angular2 中控制 ng-bootstrap 模态的宽度。谢谢

【问题讨论】：

你试过 CSS，在 CSS 规则的开头添加规则 :host /deep/ 吗？

那也没用！

获取引导模式对话框类，然后重写它。你可以在类名之前使用 /deep/

在浏览器开发工具中的第一个实验（我建议使用 Chrome 浏览器）。您可以直接突出显示元素并在开发工具中应用 CSS 规则（使用开发工具时不需要 :host /deep/）。一旦找到可行的方法，请在组件中使用相同的规则，在前面加上 :host /deep/ 我们可能需要查看示例代码才能提供更多帮助。

谢谢，@KetanAkbari

【参考方案1】：

我通过将默认引导 css 类 modal-lg 添加到我的模板解决了这个问题：

<div id="modalId" role="dialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Title</h4>
            </div>
            <div class="modal-body">
                Body
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">
                    Save
                </button>
            </div>
        </div>
    </div>
</div>

引导默认大小：

小：modal-sm 大：模态-lg 特大号：modal-xl

其他选项：

垂直居中：模态对话框居中 可滚动内容：modal-dialog-scrollable