Bootstrap 导航栏无法打开或折叠答案

【问题标题】：Bootstrap navbar not opening or collapsingBootstrap 导航栏无法打开或折叠
【发布时间】：2016-12-15 09:58:13
【问题描述】：

我正在寻找一个可折叠的导航栏。我用下面的代码尝试过，但没有成功。

以下是我的代码：

<!DOCTYPE html>
<html>
<head>
<title> Portfolio</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js">        </script>
</head>
<body>
<!-- nav bar -->
<nav style="background-color:#ffaa00" class="navbar navbar-light navbar-static-top">
<div class="container">
<div class="navbar-header">
<a href="#" class="navbar-brand">Portfolio Site</a>
<button type="button" class="navbar-toggle" data-        toggle="collapse" data-target=".navigation"><span class="glyphicon glyphicon-                    menu-hamburger"></span></button>
</div>
<div class="collapse navbar-collapse navigation">
<ul class="nav navbar-nav navbar-right" >
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</nav>
</body>    
</html>

【问题讨论】：

您需要在 Bootstrap.js 之前放置 jQuery 并且（可能是错字）但 data- toggle="collapse" 需要是 data-toggle="collapse"，没有空格。

标签： html twitter-bootstrap navbar

【解决方案1】：

你错过了，

<span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>

在您的按钮标签中。还要确保添加正确的引导程序和 Jquery CDN

<html>
<head>
<title> Portfolio</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<!-- nav bar -->
<nav style="background-color:#ffaa00" class="navbar navbar-light navbar-static-top">
<div class="container">
<div class="navbar-header">
<a href="#" class="navbar-brand">Portfolio Site</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navigation"><span class="glyphicon glyphicon-menu-hamburger"></span></button>
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
</div>
<div class="collapse navbar-collapse navigation">
<ul class="nav navbar-nav navbar-right" >
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</nav>
</body>    
</html>

【讨论】：

我是否需要图标栏跨度标签，因为我有 glyphicon 版本？