Bootstrap导航栏不会切换
[英]Bootstrap navbar will not toggle
问题描述
我是使用Bootstrap的新手，并且很乐意在那里的一位专业人士向我展示我在哪里犯错。
我要完成的工作：我正在使用Bootstrap在一个响应式网站上工作。 我希望导航栏固定在顶部，并且当网页缩小到移动大小时，我希望导航栏在按下时显示菜单项。
问题：在移动浏览器尺寸下，导航栏在按下时不会显示任何菜单项。 没有切换。
我尝试过的操作：我浏览了其他用户的StackOverflow问题和评论，其中大多数人都说过确保“ data-toggle”与“ collapse navbar-collapse”类之后的id选择器匹配。
您会发现这些匹配。 myNavbar是一个ID选择器。 解决方案不起作用。
<div class="container-fluid" id="contentsOfMenu">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class"page-scroll">
<a href="#welcome" id="brandLabel"><img src="images/brainFishIconMenu.png"/></a>
<a class="navbar-brand" href="#welcome" >BrainFish</a>
</div>
</div><!--end of navbar-header--------------------------->
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right" id="navLinkColor">
<li class="page-scroll"><a href="#aboutUs">About</a></li>
<li class="page-scroll"><a href="#services">Services</a></li>
<li class="page-scroll"><a href="#approach">Approach</a></li>
<li class="page-scroll"><a href="#contact">Contact</a></li>
</ul>
</div><!--end of myNavBar-->
</div><!--end of contentsOfMenu--------------------->
</nav><!--end of navigation-->
3 个解决方案
解决方案1
2 已采纳
首先确保您在jquery脚本标记之后包含了bootstrap.js，然后检查导航栏标记，例如：
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="path/to/bootstrap.js" type="text/javascript"></script><!--required for navbar toggle-->
和
<div class="navbar navbar-inverse navbar-static-top navbar-topic">
<div class="container">
<div class="navbar-header"><!--navbar start-->
<a href="#" class="navbar-brand"><!--Logo -->
your site
</a>
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span><!--4 icon-bar spans create the dropdown menu-->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">More things <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="/html/webdesign/html.php">Html</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link 2</a></li>
<li><a href="">Link 3</a></li>
</ul>
</li>
<li><a href="">Links</a></li>
<li><a href="">Contact</a></li>
</ul>
</div>
解决方案2
1 2018-04-04 19:54:47
您需要正确添加CDN，否则崩溃和切换将不起作用
添加Bootstrap 4 CDN的顺序是：
- jQuery的
- Popper.js
- Bootstrap JS
根据Bootstrap 4规范要遵循的示例模板是：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Kulkarni Book-Stall</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> </head> <body> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Navbar</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" 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="search" placeholder="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> </form> </div> </nav> </body> </html>
解决方案3
0 2015-02-22 20:52:30
您可能缺少引导程序的javascript组件。 菜单折叠才能正常工作。 或者，异常可能已停止Javascript。 您可以在浏览器调试控制台中进行检查。
Bootstrap导航栏切换不呈现
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.