of-bootstrap 样式未导入

Question

正在从 here 设置手风琴，但样式导入不正确。我希望看到这样的灰色框：

目标：

但是我的代码是这样的：

app.module 导入（使用 forRoot() 因为）：

NgbModule.forRoot()

HTML:

<ngb-accordion #acc="ngbAccordion" activeIds="ngb-panel-0">
  <ngb-panel title="Simple">
    <ng-template ngbPanelContent>
      Hi!
    </ng-template>
  </ngb-panel>
  <ngb-panel>
    <ng-template ngbPanelTitle>
      <span>&#9733; <b>Fancy</b> title &#9733;</span>
    </ng-template>
    <ng-template ngbPanelContent>
      lolzy
    </ng-template>
  </ngb-panel>
</ngb-accordion>

Answer 1

ng-bootstrapdocumentation表示：

The only two dependencies are Angular and Bootstrap 4 CSS

您需要添加对 Bootstrap 4.x.x CSS 的引用。这可以通过将 CDN <link> 添加到您的 index.html 来完成。以下CDN来自当前Boostrap 4.x.x documentation:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

或者，如果您使用的是@angular/cli，您可以将 Global Styles 添加到 angular.json styles 数组属性中，其中的相对路径来自 angular.json 到 node_modules/bootstrap/dist/css/bootstrap.min.css:

  "styles": [
    "node_modules/bootstrap/dist/css/bootstrap.min.css",
    "src/styles.css",
  ],

您还可以对 style.css 文件中的 node_modules bootstrap.min.css 使用导入语句。

@import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

希望对您有所帮助！

of-bootstrap 样式未导入

ng-bootstrap style not importing

bootstrap-modal

ng-bootstrap

angular