Bootstrap 不工作

Question

我有一个 Angular 4 应用程序。

我已经安装了 Bootstrap 4 和 NG Bootstrap:

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

现在 package.json 我有：

"dependencies": {
  "@angular/common": "^4.2.4",
  "@angular/compiler": "^4.2.4",
  "@angular/core": "^4.2.4",
  "@angular/forms": "^4.2.4",
  "@angular/http": "^4.2.4",
  "@angular/platform-browser": "^4.2.4",
  "@angular/platform-browser-dynamic": "^4.2.4",
  "@angular/router": "^4.2.4",
  "@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.5",
  "angular2-jwt": "^0.2.3",
  "bootstrap": "^4.0.0-beta",
  "core-js": "^2.4.1",
  "font-awesome": "^4.7.0",
  "jquery": "^3.2.1",
  "popper.js": "^1.12.5",
  "rxjs": "^5.4.2",
  "zone.js": "^0.8.14"
}

在app.module.ts中：

...
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
...
@NgModule({
  ...
  imports: [
    ...
    NgbModule.forRoot()
    ...
  ],
  ...
})
...

这就是我所做的一切。 Bootstrap 对我的页面完全没有影响。

之前我使用的是 Bootstrap v3.3.7，它工作正常。当时我在 .angular-cli.json.

中添加了 css 和 jquery 引用

现在我没有这些，因为文档说我不需要它们。（出于好奇，我还是尝试添加它们，但它给我的页面带来了一些非常有限的丑陋 Bootstrap 外观，仅此而已。）

可能是什么问题？

Answer 1

如果您使用 Angular-CLI，您需要将 bootstrap 的样式和脚本添加到 angular-cli.json 文件中，如下所示：

... "styles": [
        "styles.css",
        "../node_modules/bootstrap/dist/css/bootstrap.min.css"
      ],
      "scripts": [
        "../node_modules/jquery/dist/jquery.min.js",
        "../node_modules/tether/dist/js/tether.js",
        "../node_modules/popper.js/dist/umd/popper.js", 
        "../node_modules/bootstrap/dist/js/bootstrap.min.js"
      ], ...

Bootstrap 不工作

Bootstrap not workig

bootstrap-4

ng-bootstrap

angular