jquery - Bootstrap 3 导航栏不扩展

标签 jquery html css twitter-bootstrap navbar

<分区>

我正在使用 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 需要先加载,这样它的依赖项才能使用该库。由于 bootstrap.min.js 依赖于 jQuery,因此您应该在 AFTER 加载 jQuery 后加载它。

只需移动您的 jQuery 文件 jquery.min.js before 您的 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>

关于jquery - Bootstrap 3 导航栏不扩展,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38030727/

上一篇:css - 为占位符中的部分文本设置样式

下一篇:html - Bootstrap 具有相同高度和背景颜色的列

相关文章:

javascript - 禁用手动页面刷新并仅允许以编程方式刷新

css - div悬停背景颜色,里面有textarea

html - 如何更改 branch.io 中深度 View html 页面的样式? (创建自定义样式)

css - 图像向左浮动,文本在图像旁边垂直居中

html - 如何在 Bootstrap 中以不同的分辨率保持图像大小正确?

javascript - 试图将功能彼此分离或隔离

javascript - 如何覆盖 console.log() 并在输出的开头添加一个单词?

javascript - 使用 jQuery/JavaScript 更新一堆 HTML 元素的最有效方法?

javascript - 如何获取div的数据属性,然后在cookie中传递

css - 将 calc 与 rem 和 px 一起使用时解析错误