关于CSS:如何更改ngx bootstrap模态宽度?

 2021-04-09 

How to change ngx bootstrap modal width?

我已经尝试过如何将宽度设置为ngx bootstrap模态,但就像它是固定的一样?

这是html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
    <div bsModal #childModal="bs-modal" class="modal fade" tabindex="-1"
     role="dialog" [config]="{backdrop: 'static'}" aria-hidden="true">
   
   
       
            <button type="button" class="close" data-dismiss="modal" aria-
    label="Close" (click)="hide()"><span aria-hidden="true"></span>
     </button>
            <h4 class="modal-title" id="myModalLabel">Are you sure?</h4>
           
               
                    <button type="button" id="dialog_no" class="btn btn-
        default btn-block"
data-dismiss="modal" (click)="hide()">No</button>
               
               
                    <button type="button" id="dialog_yes" class="btn btn-
     primary btn-block ladda-button"
data-style="expand-right"
     (click)="confirm()">Yes</button>

如何设置按钮的模态宽度,使其仅位于模态的边缘,可以说有5 px的边框边距?

模态引导程序

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


在对模式进行方法调用时,可以使用ngx-bootstrap附带的ModalOptions类设置配置对象。其中,'class'属性允许您传递将附加的类。

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

希望这会有所帮助


类似于@jgrittens响应。

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

max-width设置为300px


创建模态时,将css类传递给以下选项:

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

我建议在组件装饰器中添加" encapsulation:ViewEncapsulation.None",然后使用类似以下内容的类覆盖该类:

1
2
3
4
 .modal-dialog{
    max-width: 600px !important;
    width: 600px !important;
  }


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

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

对我有用的是:: ng-deep,带有.modal-content,
但仅在放置!important属性

之后

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

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

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

只需将以下行添加到您的ts文件中:
config:ModalOptions = {class:'modal-lg'};
然后在BsModal sERVICE

的show方法中也传递配置

示例:

1
2
3
config: ModalOptions = { class: 'modal-lg' };
openModal(template: TemplateRef) {
this.modalRef = this.modalService.show(template, this.config);

} ??


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


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