代码之家 › 专栏 › 技术社区 › Rilcon42

ng引导样式未导入

ng-bootstrap bootstrap-modal angular

1

Rilcon42 · 技术社区 · 7 年前

从…摆好手风琴 here 但是样式没有正确导入。我希望看到这样的灰色盒子:

app.module导入(使用forRoot(),因为 this

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>

1 回复 | 直到 7 年前

1

Alexander Staroselsky 7 年前

这个 ng-bootstrap documentation 表示:

仅有的两个依赖项是Angular和bootstrap4css

您需要添加对bootstrap4.x.xcss的引用。这可以通过添加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 数组属性的相对路径到 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 在 style.css 文件。

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