ng-bootstrap 样式未导入

Question

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

目标：

但是我的代码看起来像这样：

---

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-bootstrap文档指出：

仅有的两个依赖项是 Angular 和 Bootstrap 4 CSS

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

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

或者，如果您使用@angular/cli，您可以使用从angular.json到node_modules/bootstrap/dist/css/bootstrap.min.css的相对路径将全局样式添加到您的angular.json styles数组属性：

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

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

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

希望这有帮助！