Question

我需要创建一个下拉按钮，因此我安装了bootstrap和ng-boostrap。这是我的html：

<div ngbDropdown class="d-inline-block">
    <button class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle>Toggle dropdown</button>
    <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
        <button class="dropdown-item">Action - 1</button>
        <button class="dropdown-item">Another Action</button>
        <button class="dropdown-item">Something else is here</button>
    </div>
</div>

在我的app.module.ts中：

imports:{
    NgbModule.forRoot()}

我也将bootstrap css放在了我的angular.json文件中。

问题在于下拉列表显示为灰色，就像没有CSS一样。我不知道是什么问题。有人可以帮助我吗？

编辑我的angular.json文件具有以下内容：

"styles": [
              "src/styles.css",
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "node_modules/font-awesome/css/font-awesome.css"
            ],

Answer 1

第1步）安装@ ng-bootstrap / ng-bootstrap

npm install --save @ng-bootstrap/ng-bootstrap

第2步）将ng-bootstrap软件包导入app.module.ts文件

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

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

注意：无需执行 NgbModule.forRoot（）

第3步）在app.component.html文件中使用您的html代码

<div ngbDropdown class="d-inline-block">
    <button class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle>Toggle dropdown</button>
    <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
        <button class="dropdown-item">Action - 1</button>
        <button class="dropdown-item">Another Action</button>
        <button class="dropdown-item">Something else is here</button>
    </div>
</div>

我创建了相同的示例，该示例是从ng-bootstrap分叉的。
View Demo

希望这会对您有所帮助。

Answer 2

我通过添加以下行解决了这个问题：

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

到我的 /src/styles.css 文件。

（您需要安装bootstrap或bootstrap-css-only。要安装运行命令npm install bootstrap-css-only --save）

切换按钮似乎没有CSS

2 个答案: