twitter-bootstrap – 使用bootstrap的Angular 4下拉菜单
发布时间:2020-12-17 20:38:16 所属栏目:安全 来源:网络整理
导读:我无法使用bootstrap在角度4中使用下拉菜单.我在这里发现了一些不同的反应,但没有任何效果.主要主菜单项显示但不显示掉落.无论如何我也没有记录错误.我已经包含了我的最新版代码.任何帮助,将不胜感激. 这是应用程序组件的HTML app-header /app-headerdiv cla
我无法使用bootstrap在角度4中使用下拉菜单.我在这里发现了一些不同的反应,但没有任何效果.主要主菜单项显示但不显示掉落.无论如何我也没有记录错误.我已经包含了我的最新版代码.任何帮助,将不胜感激.
这是应用程序组件的HTML <app-header ></app-header> <div class="container-fluid"> <div class="row" > <div class="col-md-12"> <router-outlet></router-outlet> </div> </div> </div> 这是app-header html代码. <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <a routerLink="/" class="navbar-brand">NEMO</a> </div> <div class="collapse navbar-collapse navbar-ex1-collapse" > <ul class="nav navbar-nav"> <li routerLinkActive="active"><a routerLink="/file-restore" *ngIf="! newHireService.isNewHireMode">File Restore</a></li> <li class="menu-item dropdown" > <a style="cursor: pointer;" class="dropdown-toggle" data-toggle="dropdown" >Reports<span class="caret" ></span></a> <ul class="dropdown-menu"> <li class="menu-item dropdown dropdown-submenu"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Level 1</a> <ul class="dropdown-menu"> <li class="menu-item "> <a href="#">Link 1</a> </li> <li class="menu-item dropdown dropdown-submenu"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Level 2</a> <ul class="dropdown-menu"> <li> <a href="#">Link 3</a> </li> </ul> </li> </ul> </li> </ul> </li> </ul> </div> </div> </nav> 我的.angular-cli.json文件包含以下内容: { "$schema": "./node_modules/@angular/cli/lib/config/schema.json","project": { "name": "nemo-ui" },"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","../node_modules/font-awesome/css/font-awesome.css","../node_modules/jquery/dist/jquery.min.js","styles.css" ],"scripts": [],"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" },{ "project": "src/tsconfig.spec.json" },{ "project": "e2e/tsconfig.e2e.json" } ],"test": { "karma": { "config": "./karma.conf.js" } },"defaults": { "styleExt": "css","component": {} } } 解决方法
问题出在你的angular-cli代码上.您将jquery.min.js放在css块中,并且您也没有加载引导脚本.
这就是你的角度cli sholuld那部分的样子: "styles": [ "../node_modules/bootstrap/dist/css/bootstrap.min.css","styles.css" ],"scripts": [ "../node_modules/jquery/dist/jquery.min.js","../node_modules/bootstrap/dist/js/bootstrap.js" ], (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |