Bootstrap 3导航栏未扩展[重复]答案

【问题标题】：Bootstrap 3 Navbar Not Expanding [duplicate]Bootstrap 3导航栏未扩展[重复]
【发布时间】：2016-06-25 16:48:58
【问题描述】：

我正在使用 Twitter Bootstrap 3 使我的网页缩放到任何屏幕尺寸，并且按下触发按钮时导航栏没有展开。

代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Latest compiled and minified CSS: Bootstrap 3 -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

    <!-- Latest compiled and minified JavaScript:Bootstrap 3 -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>

    <meta charset="utf-8">
    <title>Webpage</title>
  </head>
  <body>
    <nav class="navbar navbar-default" role="navigation">
      <div class="container-fluid">
      <div class="navbar-header">
            <a class="navbar-brand">Webpage</a>
            <button type="button" class="navbar-toggle"  data-target=".navbar-collapse" data-toggle="collapse" aria-expanded="false" aria-controls="navbar3">
              <span class="sr-only">Toggle nav</span>
              <span class="glyphicon glyphicon-plus-sign"></span>
            </button>
          </div>
              <ul class="nav navbar-nav collapse navbar-collapse">
                <li class="active"><a href="/p1">Page1</a></li>
                <li><a href="/p2">Page2</a></li>
                <li><a href="/p3">Page3</a></li>
              </ul>
      </div>
      </nav>

      <div id="content">

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

出了什么问题，我该如何解决？

【问题讨论】：

标签： jquery html css twitter-bootstrap navbar

【解决方案1】：

jQuery 需要先加载，这样它的依赖才能使用库。由于bootstrap.min.js 依赖于 jQuery，你应该在 AFTER jQuery 加载之后加载它。

只需移动您的 jQuery 文件 jquery.min.js之前您的引导 js 文件 bootstrap.min.js，您的导航栏应该可以正常工作。

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>
 <!-- Latest compiled and minified JavaScript:Bootstrap 3 -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

【讨论】：