of-bootstrap 模态边界半径

Question

自定义 NgBoostrap 模态边框半径的最佳方法是什么？

<ng-template #content let-c="close" let-d="dismiss">
    <div class="modal-header">
        <h4 class="modal-title" id="modal-basic-title">Test</h4>
        <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="modal-body">
        <p>Hello, World!</p>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-outline-dark" (click)="c('Save click')">Save</button>
    </div>
</ng-template>

Answer 1

您只需要将 border-radius 添加到 modal-content class:

.modal-content{
    border-radius: 50px;
}

Answer 2

我转到我的组件的打字稿并输入：

this.modalService.open(content, {centered: true, windowClass: 'modal-rounded', size: 'lg'});

在我进入主 scss (styles.scss) 并将这段代码放在那里后不久：

.modal-rounded {
    .modal-content {
      border-radius: 20px !important;
    }
  }

of-bootstrap 模态边界半径

ng-bootstrap Modal border-radius

html

css

ng-bootstrap