角7不呈现引导控制

Question

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

我使用的是纸仪表板引导管理面板。

如下所示：

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

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

​

​

但在我的角度应用程序中，它不能正常工作或渲染。以检查引导代码是否正确工作。我创建了一个虚拟html文件，它正确地呈现，就像在屏幕截图中一样。

但这就是它的呈现方式

​

​

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

"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"
            ],

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

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

并在样式数组中删除它。

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

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

​

​

是什么导致了这个角度的变化？我来自wpf。我正在用角7和asp.net核心2做自我研究，所以我真的不清楚为什么会发生这样的事情。

谢谢。

Answer 1

从我所看到的是，您正在从

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

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

纸仪表板正在使用Bootstrap v3.3.5，因此您的版本不匹配。(在这里查一下)

可能的解决办法是：

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