Angular 4 Bootstrap 4无法正常渲染

Question

我有一个全新创建的Angular 4 CLI应用程序，其中安装了以下软件包：

npm install bootstrap@4.0.0-beta jquery tether popper.js --save

.angular-cli.json提取：

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

],

通过此设置，我有一个导航栏组件，其中包含来自the official Bootstrap 4 page的html代码，该代码无法正常呈现： 即使浏览器处于全屏模式，也有一个切换按钮，缺少背景颜色，交换“Navbar”和切换器。

然而，当我使用Bootstrap 4 CDN时它完美无缺。除导航栏之外的任何其他样式在两种情况下都按预期工作。

那么，在本地安装Bootstrap时我做错了什么？

Answer 1

这是因为bootstrap版本不兼容，为了解决，在styles.css中，添加以下行：

@import url('https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css');

Answer 2

听起来，4.0.0- Beta 中的css发生了重大变化。

https://github.com/bootstrap-vue/bootstrap-vue/issues/812

刚刚降级你的bootstrap版本：

  

npm install bootstrap@4.0.0-alpha.6 --save

注意：您尝试的CDN使用的是 apha.6 ，说明它工作的原因：）

Answer 3

在 angular.json 中使用此配置。注意我们如何使用node_modules / popper.js / dist / umd /popper.min.js。这似乎可行。

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

祝一切顺利！