引导汉堡导航菜单未在移动浏览器中打开答案

【问题标题】：Bootstrap burger nav menu not opening in mobile browser引导汉堡导航菜单未在移动浏览器中打开
【发布时间】：2018-01-31 12:05:28
【问题描述】：

我正在使用引导样式表。

以下代码用于我的导航面板。这在我的桌面浏览器上运行良好，但是当我减小浏览器大小或在移动设备上进行测试时，汉堡菜单会出现，但不会按预期展开以显示导航的内容。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css'>

<body>
  <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle Navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
        <a class="navbar-brand color-me" href="#home">Home</a>
      </div>

      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#about-me">About</a></li>
          <li><a href="#portfolio">Portfolio</a></li>
          <li><a href="##">Page 1</a></li>
          <li><a href="##">Page 2</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
      </div>
    </div>
    <!-- container -->
  </nav>

我的 HTML 中是否缺少某些内容？我不明白问题出在哪里！

【问题讨论】：

标签： html twitter-bootstrap

【解决方案1】：

请包含此行，它将起作用。

注意：按此顺序包含 - 在 Bootstrap 之前包含 Jquery。Bootstrap 需要在 Bootstrap 之前加载 Jquery。

  <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>

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

您缺少 javascript 库，因此事件没有响应，

【讨论】：

【解决方案2】：

您似乎错过了包含引导 js 文件。请查看https://getbootstrap.com/docs/3.3/getting-started/

【讨论】：

【解决方案3】：

我猜使用 bootstrap.min.js 来解决问题并不能解决问题，除非你没有在 bootstrap@3 中包含 jquery

请同时附上以下链接或通过 javascript 的 dist 文件夹获取

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>

【讨论】：