Question

我正在寻找可折叠的导航栏。我尝试使用下面的代码而没有任何成功。

以下是我的代码：

<!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>

Answer 1

你错过了，

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

在你的按钮标签内。还要确保添加正确的bootstrap和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>

Bootstrap导航栏无法打开或折叠

1 个答案: