为什么我的 bootstrap 下拉元素呈现得很糟糕？

Question

我想用 ng-bootstrap 美化我的前端（通过 npm install --save ng-bootstrap 安装）

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  ...
  imports: [NgbModule.forRoot(), ...],
  ...
})
export class YourAppModule {
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ngbDropdown class="d-inline-block">
    <button class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle>
        Choose your playlist
    </button>
    <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
        <button
            class="dropdown-item" 
            *ngFor="let playlist of playlists"
            [class.selected]="playlist === selectedPlaylist"
            (click)="onSelect(playlist)">{{playlist.name}}</button>
    </div>
</div>

但它是这样呈现的：

关于如何解决*插入许多令人厌恶的同义词*结果的任何想法？ :D

Answer 1

您似乎忘记添加 bootstrap.css。

只需将 link 添加到您的 index.html:

<link 
  rel="stylesheet" 
  href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />

此外，您将从以下路径导入 NgbModule：

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

不是 NOT CALL .forRoot 就可以了。

Here's a Working Sample StackBlitz for your ref.

为什么我的 bootstrap 下拉元素呈现得很糟糕？

Why do my bootstrap dropdown elems render badly?

html

ng-bootstrap

angular

angular7