Стиль ng-bootstrap не импортируется

Question

Настройка аккордеона из здесь , но стиль импортируется неправильно.Я ожидал увидеть серые поля вроде этого:

ЦЕЛЬ:

Однако мой код выглядит так:

Импорт 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>

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, вы можете добавить 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",
  ],

Вы также можете использовать операторы импорта для node_modules bootstrap.min.css в style.css file.

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

Надеюсь, это поможет!