今天早上我第一次深入研究 Bootstrap，但我的可折叠菜单出现了问题。当浏览器的大小低于 768px 时，我可以看到右上角的汉堡包，但它没有任何功能。我感觉这是由于我使用 CDN 来引用 Bootstrap 造成的。
<!DOCTYPE html>
<html>
<head lang='en'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<title>Text for title</title>
</head>
<body>
<div class='navbar navbar-default'>
<div class="container-fluid">
<div class='navbar-header'>
<button type='button' class='navbar-toggle collapsed' data-toggle='collapse' aria-expanded="false">
<span class='sr-only'>Toggle Navigation</span>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
</button>
<h1 class='navbar-brand'><a href='#'>Name goes here</a></h1>
</div>
<div class='collapse navbar-collapse'>
<ul class= 'nav navbar-nav'>
<li role='navigation' ><a href='#'>Home</a></li>
<li role='navigation'><a href='#'>About</a></li>
<li role='navigation'><a href='#'>Portfolio</a></li>
<li role='navigation'><a href='#'>Resources</a></li>
<li role='navigation'><a href='#'>Contact</a></li>
</ul>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha256-KXn5puMvxCw+dAYznun+drMdG1IFl3agK0p/pqT9KAo= sha512-2e8qq0ETcfWRI4HJBzQiA3UoyFk6tbNyG+qSaIBZLyW9Xf3sWZHN/lxe9fTh1U45DpPf07yj94KsUHHWe4Yk1A==" crossorigin="anonymous"></script>
</body>
</html>
最佳答案
按钮上缺少 data-target，该按钮链接到可折叠 div 上的标识符。试试这个:
<div class='navbar navbar-default'>
<div class="container-fluid">
<div class='navbar-header'>
<button type='button' class='navbar-toggle collapsed' data-toggle='collapse' data-target="#mynavbar" aria-expanded="false">
<span class='sr-only'>Toggle Navigation</span>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
</button>
<h1 class='navbar-brand'><a href='#'>Name goes here</a></h1>
</div>
<div id="mynavbar" class='collapse navbar-collapse'>
<ul class= 'nav navbar-nav'>
<li role='navigation' ><a href='#'>Home</a></li>
<li role='navigation'><a href='#'>About</a></li>
<li role='navigation'><a href='#'>Portfolio</a></li>
<li role='navigation'><a href='#'>Resources</a></li>
<li role='navigation'><a href='#'>Contact</a></li>
</ul>
</div>
</div>
</div>
关于javascript - 通过 CDN Bootstrap ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34421701/