如何改变ngx bootstrap模态宽度？

Question

如何将宽度设置为我的ngx bootstrap模式,我已经尝试但是喜欢它是固定的吗？

这是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的边框边距？

模态引导

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

Answer 1

在对模态的方法调用中,可以使用与ngx-bootstrap一起提供的ModalOptions类设置配置对象.在其中,'class'属性允许您传递将被追加的类.

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

希望这可以帮助

Answer 2

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

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

Answer 3

类似于@jgritten的回应。

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

它设置max-width为300px

Answer 4

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

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

Answer 5

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