javascript - Bootstrap 3 固定顶部导航栏

标签 javascript jquery twitter-bootstrap

我正在尝试使用 Bootstrap 3 固定顶部导航栏。但是当我减小浏览器屏幕尺寸并单击按钮时,它不显示任何链接

这是代码

<!DOCTYPE html>
<html>
<head>  
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="bootstrap/css/bootstrap-theme.min.css">
</head>    

<body>

    <!-- Creating a Fixed (top) Navigation Bar with Dropdown -->  
    <div class="navbar navbar-default navbar-fixed-top">    
        <div class="container">
            <div class="navbar-header">
              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                   <span class="icon-bar"></span>  
                   <span class="icon-bar"></span>  
                   <span class="icon-bar"></span>               
              </button>
              <a href="#" class="navbar-brand">Exclusive</a>
            </div>     

            <div class="navbar-collapse collapse">                
                <ul class="nav navbar-nav">
                    <li><a href="#">Products</a></li>
                    <li><a href="#">Blog</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Contact Us</a></li>
                </ul>
            </div>                       

        </div>    
    </div>  
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <script src="bootstrap/js/bootstrap.js"></script>
    <script src="bootstrap/js/jquery-1.11.3.js"></script>

</body>
</html>

enter image description here

但是在调整大小并单击切换按钮时,它不显示链接

enter image description here

我已经包含了所需的 jquery 文件。

最佳答案

您将收到script错误$ is undefined,因为您加载脚本的方式如下所示是错误的。

<script src="bootstrap/js/bootstrap.min.js"></script><!--Either keep this-->
<script src="bootstrap/js/bootstrap.js"></script> <!--or this-->
<script src="bootstrap/js/jquery-1.11.3.js"></script><!--should come first-->

在加载任何 .js 文件之前,您需要加载 jquery-*.js

所以最终你需要

<script src="bootstrap/js/jquery-1.11.3.js"></script>
<script src="bootstrap/js/bootstrap.js"></script> 

因此,您可以使用 bootstrap.jsbootstrap.min.js,但不能同时使用两者。这会产生冲突!

<强> DEMO

关于javascript - Bootstrap 3 固定顶部导航栏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32241381/

相关文章:

CSS (Bootstrap 3) - 固定宽度和容器,并排

javascript - Lychrel 数字 Javascript?

javascript - 错误 : ENOENT: no such file or directory, 打开 '/moviedata.json'

javascript - 使用 D3 进行纪元时间转换

javascript - 在 tbody 标签中应用某个类

html - v4 bootstrap 全高侧边栏

javascript - 如何为多个ajax调用设置延迟并为其绑定(bind)停止按钮?

javascript - 如何在响应式设计中从 Facebook 页面插件中 Conceal "timeline"?

JavaScript 异步回调错误处理

twitter-bootstrap - Bootstrap 加载错误的字形图标