html - Angular 7 不呈现 Bootstrap 控制

Question

我正在创建一个需要浏览图片的简单系统。

我正在使用 paper-dashboard bootstrap 管理面板

可以在下面找到:

https://www.npmjs.com/package/paper-dashboard

然后我需要添加一个文件浏览器功能，就像我在 w3school 上找到的下面的屏幕截图

但它无法在我的 Angular 应用程序上正常工作或呈现。为了检查 Bootstrap 代码是否正常工作。我创建了一个虚拟 html 文件，它正确呈现，就像在屏幕截图中一样。

但它是这样呈现的

但是我在 angular.json 文件中有 bootstrap.min.css

"styles": [
              "src/styles.scss",
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "node_modules/paper-dashboard/assets/css/paper-dashboard.css"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.js",
              "node_modules/bootstrap/dist/js/bootstrap.js",
              "node_modules/bootstrap-notify/bootstrap-notify.js"
            ],

但是如果我在 style.scss 中导入 bootstrap.min.css

@import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

并在样式数组中移除它

"styles": [
              "src/styles.scss",
              "node_modules/paper-dashboard/assets/css/paper-dashboard.css"
            ],

变成了这样。导航未正确呈现。

在 Angular 中可能是什么原因造成的？我来自wpf。我正在使用 angular 7 和 asp.net core 2 自学。所以我真的不清楚 STLye 发生了什么。

谢谢。

Answer 1

据我所知，您正在从中导入 Bootstrap

"node_modules/bootstrap/dist/css/bootstrap.min.css"

这意味着您将 bootstrap 安装为一个单独的包，这很可能是最新版本 - v4.3.1

paper-dashboard正在使用 Bootstrap v3.3.5，因此您的版本不匹配。 (Check it here)

可能的解决方案是:

• npm install bootstrap@3.3.5 - 它将用 3.3.5 版本替换您当前的 Bootstrap 安装
• 更改您的导入以匹配位于 paper-dashboard 包中的 bootstrap.min.css 的路径
• 手动更新仪表板以匹配最新版本。