Question

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

我正在使用纸仪表板引导管理面板

可以在下面找到：

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

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

但是它在我的Angular应用程序中无法正常工作或呈现。为了检查引导程序代码是否正常工作。我创建了一个虚拟的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"
            ],

变成这样。导航显示不正确。

是什么原因导致了Angular？我来自wpf。而且我正在使用角度7和asp.net核心2进行自我学习。因此，我真的不十分清楚该线框正在发生什么。

谢谢。

Answer 1

据我所知，您正在从中导入引导程序

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

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

paper-dashboard使用的是Bootstrap v3.3.5，因此版本不匹配。（Check it here）

可能的解决方案是：

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

Angular 7不会呈现自举程序控件

1 个答案: