Angular 6和Bootstrap-警报未按预期显示

Question

基本上，我安装了bootstrap和ng-bootstrap，导入了bootstrap CSS文件，但是警报并未按预期显示

这是目前的显示方式（请忽略黑色背景，当然是：P）

这就是它的样子

我确实从位于app.module.ts的NgModule的ng-bootstrap导入了NgbModule，并基本上从here

复制了代码

这是我目前拥有的代码

<p *ngFor="let alert of alerts">
  <ngb-alert [type]="alert.type" (close)="closeAlert(alert)">{{ alert.message }}</ngb-alert>
</p>

对于HTML和JS文件：

export class AlertsClosableComponent implements OnInit {

  @Input()
  public alerts: Array<IAlert> = [];

  private backup: Array<IAlert>;

  constructor() {
    this.alerts.push({
      id: 1,
      type: 'success',
      message: 'This is an success alert',
    }, {
      id: 2,
      type: 'info',
      message: 'This is an info alert',
    }, {
      id: 3,
      type: 'warning',
      message: 'This is a warning alert',
    }, {
      id: 4,
      type: 'danger',
      message: 'This is a danger alert',
    }, {
      id: 5,
      type: 'primary',
      message: 'This is a primary alert',
    }, {
      id: 6,
      type: 'secondary',
      message: 'This is a secondary alert',
    }, {
      id: 7,
      type: 'light',
      message: 'This is a light alert',
    }, {
      id: 8,
      type: 'dark',
      message: 'This is a dark alert',
    });
    this.backup = this.alerts.map((alert: IAlert) => Object.assign({}, alert));
  }

  public closeAlert(alert: IAlert) {
    const index: number = this.alerts.indexOf(alert);
    this.alerts.splice(index, 1);
  }

  public reset() {
    this.alerts = this.backup.map((alert: IAlert) => Object.assign({}, alert));
  }

  ngOnInit() {

  }
}

export interface IAlert {
  id: number;
  type: string;
  message: string;
}

最后是css文件（scss，但仍然是）

@import '~bootstrap/dist/css/bootstrap.css';

有人知道我做错了什么吗？

我对Angular还是很陌生，所以请不要讨厌。

谢谢！