Bootstrap Navbar无法正常工作:AngularCLI
发布时间:2020-12-18 00:18:05 所属栏目:安全 来源:网络整理
导读:我将bootstrap包含在我的angularcli项目中,但是当我尝试包含导航栏时,没有任何元素正常工作.我在网站上使用标准的boostrap导航栏示例,但它看起来很奇怪: 我的项目导致导航栏无法正确加载有什么问题? navbar.component.html nav class="navbar navbar-toggl
我将bootstrap包含在我的angularcli项目中,但是当我尝试包含导航栏时,没有任何元素正常工作.我在网站上使用标准的boostrap导航栏示例,但它看起来很奇怪:
我的项目导致导航栏无法正确加载有什么问题? navbar.component.html <nav class="navbar navbar-toggleable-md navbar-light bg-faded"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href="#">Navbar</a> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="text" placeholder="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> </form> </div> </nav> .angular-cli.json "styles": [ "../node_modules/bootstrap/dist/css/bootstrap.min.css","styles.css" ], 解决方法
bootstrap 4中存在一些已知问题,尤其是在navbar实现中
因此你必须安装bootstrap bootstrap@3.3.7 如果您使用的是npm,那么最好推荐以下库 npm install bootstrap@3.3.7 --save npm install bootstrap@3.3.7 tether jquery --save 在.angular-cli.json文件中添加依赖项 "styles":[ "styles.css","../node_modules/bootstrap/dist/css/bootstrap.css" ],"scripts":[ "../node_modules/jquery/dist/jquery.js","../node_modules/tether/dist/js/tether.js","../node_modules/bootstrap/dist/js/bootstrap.js" ], 使用以下HTML <nav class="navbarnavbar-inverse"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-togglecollapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Togglenavigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Angular5Website</a> </div> <div id="navbar" class="collapsenavbar-collapse"> <ul class="navnavbar-nav"> <li class="active"> <a href="#">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> </ul> </div><!--/.nav-collapse--> </div> </nav> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |