切换按钮好像没有css

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) 在 app.module.ts 文件

中导入 ng-bootstrap 包

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。要安装运行命令 npm install bootstrap-css-only --save）

切换按钮好像没有css

Toggle button seems not have css

css

twitter-bootstrap-3

ng-bootstrap

angular

angular6