ng-bootstrap样式未导入

Question

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

目标：

但是我的代码如下：

---

app.module导入（由于this而使用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-bootstrap documentation表示：

  

仅有的两个依赖项是Angular和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到{{ 1}}：

node_modules/bootstrap/dist/css/bootstrap.min.css

您还可以对 "styles": [ "node_modules/bootstrap/dist/css/bootstrap.min.css", "src/styles.css", ], 文件中的node_modules bootstrap.min.css使用import语句。

style.css

希望有帮助！