Question

我正在使用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>

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

Answer 1

jQuery需要先加载，以便它的依赖项可以使用该库。由于bootstrap.min.js依赖于jQuery，因此您应该加载 AFTER 加载jQuery。

只需移动您的jQuery文件jquery.min.js ，然后再您的bootstrap 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>

Bootstrap 3 Navbar不扩展

1 个答案: