我想查看折叠的导航项。

Question

我已经使用 bootstrap 并创建了一个导航栏，对于小尺寸显示，导航栏正在折叠，我已经创建了按钮来显示折叠的导航栏。但它不显示折叠导航

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

</head>

<body>
<div class="container">
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> Menu</button>
<span class="navbar-brand">Demo</span>

</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#">Link</a></li>
<li><a href="#">Link2</a></li>
</ul>
</div>
</div>




</div>
</body>
</html>

Answer 1

您缺少 jQuery 插件和 bootstrap.min.js 插件。

将此插件添加到 (head) 或 (bottom of body) 之后导航折叠将起作用。

<!DOCTYPE html>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>Menu Collapse</title>
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="container">
 <div class="navbar navbar-default" role="navigation">
  <div class="navbar-header">
   <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> Menu</button>
   <span class="navbar-brand">Demo</span>
  </div>
  <div class="navbar-collapse collapse">
   <ul class="nav navbar-nav">
    <li><a href="#">Link</a></li>
    <li><a href="#">Link2</a></li>
   </ul>
  </div>
 </div>
</div>

  
<script src=https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>

Answer 2

是的，你是对的，你需要添加 jQuery.js 和 bootstrap.min.js 文件并且它正在工作。

请在您的 html 页面底部添加此 js 文件。

<script src=https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

我想查看折叠的导航项。

I want to see the collapsed navigation items.

html

html-lists

collapse

nav

twitter-bootstrap