NgTemplate Bootstrap不带我的CSS类

Question

我创建了一个CSS修改，以将模式宽度相对于视图的100％更改为50％。但是类modal-content是针对modified的。

  

CSS

  .modal-content{
    width: 50%;
  }

  

HTML

<ng-template #content>
  <div class="modal-content">
    <div class="modal-header">
      <i class="fa fa-heart"></i> A
    </div>
    <div class="modal-footer">
      <i class="fa fa-heart"></i> B
    </div>
  </div>
</ng-template>

Answer 1

我在开发中也遇到了同样的问题，并且在ng-bootstrap中借助windowClass找到了解决方案

const modalRef = this.modalService.open(UserPasswordComponent, {
  windowClass: 'custom-modal-width' // add a custom class here where you open the modal
});

在您的style.css中控制宽度

.custom-modal-width .modal-content {
    width: 50%;
}

确保删除模板中的model-content类