"切换按钮在导航栏的引导程序 4 和 Angular 7 应用程序中不起作用"
[英]Toggle button not working in bootstrap 4 and angular 7 app for navbar
问题描述
I am working with Angular7 and Botstrap4.
我正在使用 Angular7 和 Botstrap4。 trying to add navbar in my app, when navbar is collapsed, toggle button not working.尝试在我的应用程序中添加导航栏，当导航栏折叠时，切换按钮不起作用。
I don't want to add ng-bootstrap, only bootstrap4.我不想添加 ng-bootstrap，只添加 bootstrap4。
Here is my code这是我的代码
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">{{title}}</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" routerLink="home">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="about">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="contact">Contact Us</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
3 个解决方案
解决方案1
3 2019-01-10 07:38:18
I think you forgot to include the bootstrap.min.js , jquery.min.js , and popper.min.js file links in angular.json where you already put the bootstrap.min.css .我认为您忘记在angular.json中包含bootstrap.min.js 、 jquery.min.js和popper.min.js文件链接，您已经在其中放置了bootstrap.min.css 。
"styles": [
"src/styles.css",
"./node_modules/bootstrap/dist/css/bootstrap.min.css",
],
"scripts": [
"./node_modules/bootstrap/dist/js/bootstrap.min.js",
"./node_modules/jquery/dist/jquery.min.js",
"./node_modules/popperjs/dist/popper.min.js"
]
解决方案2
0 2019-12-10 22:11:27
The simple solution to this problem is to import the scripts for jquery, popper and bootstrap intot the index.html file of your application.这个问题的简单解决方案是将 jquery、popper 和 bootstrap 的脚本导入到应用程序的 index.html 文件中。 Doing this will allow your navbar dropdown collapsed nav-links.这样做将允许您的导航栏下拉菜单折叠导航链接。
i did this and it works very well for me.我这样做了，对我来说效果很好。 See sample below请参阅下面的示例
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>TestApp</title> <base href="/"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/x-icon" href="favicon.ico"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"> </script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"> </script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"> </script> </head> <body> <app-root></app-root> </body> </html>
解决方案3
0 2022-02-04 07:41:12
对于我在 Angular 13 应用程序中的情况，我必须将data-bs-toggle更改为data-toggle并将data-bs-dismiss更改为data-dismiss以关闭按钮，它运行良好。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.