Question

我使用 bootstrap 并拥有一个包含两个项目的简单菜单

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Home Page</title>
  <link rel="stylesheet" href="<?php echo base_url("assets/css/bootstrap.css"); ?>">
</head>
<body>
  <nav class="navbar navbar-default" role="navigation">
   <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar1">
        <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" id="navbar1">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="item1.html">item1</a></li>
        <li><a href="item1.html">item2</a></li>
      </ul>
    </div>
  </div>
</nav>
<script type="text/javascript" src="<?php echo base_url("assets/js/jquery-1.10.2.js"); ?>"></script>
<script type="text/javascript" src="<?php echo base_url("assets/js/bootstrap.js"); ?>"></script></body></html>

1）浏览器展开后，我会在右侧看到按钮item1，item2并且效果良好

2）当浏览器的宽度较小时，菜单会折叠 collapsed menu button

3）但是，点击菜单按钮后，item1和item2不会显示。

知道出了什么问题吗？

Answer 1

您是否在html中导入了jquery和bootstrap js。它们是导航在响应模式下工作所必需的？如果没有，请尝试在html中添加它们：

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

你需要首先导入/添加jquery，然后是bootstrap js，因为bootstrap js依赖于jquery。

Answer 2

非常感谢

我链接到错误的* .js文件：（

我没有看到任何错误，所以我认为路径是正确的。

引导菜单折叠但单击折叠按钮时不显示

2 个答案: