如何更改 ngx bootstrap 模态宽度？答案

【问题标题】：How to change ngx bootstrap modal width?如何更改 ngx bootstrap 模态宽度？
【发布时间】：2018-08-22 08:13:28
【问题描述】：

如何将宽度设置为我的 ngx 引导模式，我已经尝试过，但它是固定的？

这里是html

    <div bsModal #childModal="bs-modal" class="modal fade" tabindex="-1" 
     role="dialog" [config]="{backdrop: 'static'}" aria-hidden="true">
    <div class="modal-dialog modal-sm">
    <div class="modal-content">
        <div class="modal-body text-center">
            <button type="button" class="close" data-dismiss="modal" aria-
    label="Close" (click)="hide()"><span aria-hidden="true">&times;</span>
     </button>
            <h4 class="modal-title" id="myModalLabel">Are you sure?</h4>
            <div class="modal-footer">
                <div class="col-xs-6 no-padding-left">
                    <button type="button" id="dialog_no" class="btn btn-
        default btn-block" data-dismiss="modal" (click)="hide()">No</button>
                </div>
                <div class="col-xs-6 no-padding-right">
                    <button type="button" id="dialog_yes" class="btn btn-
     primary btn-block ladda-button" data-style="expand-right" 
     (click)="confirm()">Yes</button>
                </div>
            </div>
        </div> 
    </div>
     </div>
  </div>

如何设置模态框的宽度，以便将按钮放置在模态框的边缘，比如 5 px 的边框边距？

modal bootstrap

我还没有在我的 css 文件中添加任何样式，即使我尝试修改宽度但我猜不知道如何...

【问题讨论】：

标签： css modal-dialog styles

【解决方案1】：

在模态的方法调用中，您可以使用 ngx-bootstrap 附带的 ModalOptions 类设置配置对象。其中，“类”属性允许您传递将被附加的类。

const config: ModalOptions = { class: 'modal-sm' };
this.bsModalRef = this.modalService.show(YourComponent, config);

希望对你有帮助

【讨论】：

【解决方案2】：

创建模式时，将您的 css 类传递给如下选项：

this.modalService.show(template, { class: 'modal-lg' });

【讨论】：

【解决方案3】：

类似于@jgrittens 的回复。

this.modalRef = this.modalService.show(template);
this.modalRef.setClass('modal-sm');

它将max-width 设置为300px

【讨论】：

我想给一个我想要的尺寸。怎么做。请告诉我。
@Kum 你要么覆盖现有的 css 类，要么添加你自己的。
你能给我举个例子吗？
@kum check this out.

【解决方案4】：

我建议将“封装：ViewEncapsulation.None”添加到您的组件装饰器中，然后使用以下内容覆盖该类：

 .modal-dialog{
    max-width: 600px !important;
    width: 600px !important;
  }

【讨论】：

它将此特定宽度应用于我的所有模型。我只想在我的一个模态中应用它。

【解决方案5】：

您可以简单地使用下面的样式来覆盖模态的原始尺寸

::ng-deep .modal-dialog{
    max-width: 1200px !important;
    width: 1200px;
  }

【讨论】：

【解决方案6】：

您只能使用 CSS 样式来更改容器的宽度。更改 .modal-dialog 类的 max-width 属性，在某些情况下为 .modal-sm 类。

【讨论】：

由于 Angular 的视图封装，我不相信这是可行的，因为 .modal-dialog 类是嵌套的。
@user3777933 是的，我已经尝试过了。它不工作。
.modal-sm { max-width: 350px !important; } .modal-lg { 最大宽度：559px !important; }

【解决方案7】：

您可以在创建模态后使用doucment.getelementsbyClassName。然后您可以根据需要更改元素minWidth。

【讨论】：

【解决方案8】：

只需在您的 ts 文件中添加这一行：配置：ModalOptions = {类：'modal-lg'}; 然后在 BsModal 服务的 show 方法中也传递配置

示例：

config: ModalOptions = { class: 'modal-lg' };
openModal(template: TemplateRef<any>) {
this.modalRef = this.modalService.show(template, this.config);

}

【讨论】：

【解决方案9】：

这对我有用。在styles.scss...

.modal-lg {
    max-width: 559px !important;
}

【讨论】：

【解决方案10】：

对我有用的是 ::ng-deep 和 .modal-content，但只有在我放置了 !important 属性之后

::ng-deep .modal-content {
    max-width: 1080px!important;
}

【讨论】：

【解决方案11】：

使用集合类

let modal = this.bsModalService.show(ConfirmModalComponent, { 
         initialState: { message: 'คุณแน่ใจหรือไม่ว่าจะลบข้อมูล Voucher นี้?' },});

modal.setClass('modal-custom-style');

和自定义 CSS

::ng-deep .modal-custom-style { max-width: 1200px!important; width: 1200px; }

【讨论】：

你可以编辑这个modal中的所有css，例如： // --- Modal CSS -- // ::ng-deep .modal-custom-style { max-width: 380px !important;宽度：380 像素；最大高度：290 像素！重要；高度：290px； .modal-content { 边框：无！重要； } }