[英]Bootstrap 4 with Angular 4 navbar
I have created an Angular 4 application, and I wan to use Bootstrap 4 with it. 我已经创建了一个Angular 4应用程序,并且希望与它一起使用Bootstrap 4。
I installed the Bootstrap 4.0.0-beta6 via npm, and wanted to use the starter template which should look like this. 我通过npm安装了Bootstrap 4.0.0-beta6,并希望使用看起来像这样的入门模板。
I have placed everything accordingly to a angular.cli.json which looks like this: 我已将所有内容相应地放置到如下所示的angular.cli.json中:
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"project": {
"name": "frontend"
},
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.app.json",
"testTsconfig": "tsconfig.spec.json",
"prefix": "app",
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css"
],
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/popper.js/dist/esm/popper.min.js",
"../node_modules/bootstrap/dist/js/bootstrap.min.js"
],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"lint": [
{
"project": "src/tsconfig.app.json",
"exclude": "**/node_modules/**"
},
{
"project": "src/tsconfig.spec.json",
"exclude": "**/node_modules/**"
},
{
"project": "e2e/tsconfig.e2e.json",
"exclude": "**/node_modules/**"
}
],
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "css",
"component": {}
}
}
When I do ng build
or ng serve
I got no error or whatsoever, and I can load the page. 当我进行ng build
或ng serve
我没有任何错误,也可以加载页面。
However navbar is all broken down, and looks like this: 但是navbar全部分解,看起来像这样:
When I inspect the page, I see no error, and I can call the classes. 检查页面时,我看不到任何错误,可以调用这些类。
Also I have purposely skipped NgBootstrap, since I wanted to use the native libs first. 另外,由于我想先使用本机库,因此我故意跳过了NgBootstrap。
And before asking here, I even tried the MaxCDN versions of both CSS and JS, and I've got the same results. 在这里问之前,我什至尝试了CSS和JS的MaxCDN版本,并且得到了相同的结果。
And my code structure looks similar to this. 我的代码结构与此类似。
Index.html contains <app-component>
- which loads the <app-body>
which contains simply <app-navigation>
and the rest of the container. Index.html包含<app-component>
-加载<app-body>
,其中仅包含<app-navigation>
和容器的其余部分。 (Nothing fancy). (没有什么花哨)。
I don't know if someone has faced the similar problem. 我不知道有人是否遇到过类似的问题。
Any help or suggestion would be welcome. 任何帮助或建议都将受到欢迎。
您的问题是库popper.js的导入路径,将其位置路径更改为
../node_modules/popper.js/dist/umd/popper.min.js
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.