NgTemplate Bootstrap不接受我的CSS类

Question

我创建了一个css修改，将模态宽度更改为50％，而不是视图的100％。但是类模态内容与修改后的内容重复。

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类