为什么我的引导程序下拉菜单元素渲染不好？

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。

只需在您的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';

不不打电话 .forRoot。

---

  

这是您推荐的Working Sample StackBlitz。