html - Chrome 和 Firefox Bootstrap 导航切换不起作用

标签 html twitter-bootstrap toggle navbar

请检查下面的代码有什么错误:

我尝试在 w3schools 演示页面上运行相同的内容,效果很好。但它在我的 chrome 和 firefox 上都不起作用。

我在这里遗漏了什么吗? 另外您能告诉我如何调试此类问题吗?

<body>

<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <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" href="#">Ristorante Con Fusion</a>
            </div>
            <div id="navbar" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Menu</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
            </div>
        </div>
    </nav>
</body></html>

最佳答案

您的代码没有错误。但我猜你在调用 Bootstrap 所需的源文件时出错了。

<head>内需要的文件标签:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

</body>之前需要的文件标签

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

您的 HTML 代码应如下所示。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <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" href="#">Ristorante Con Fusion</a>
            </div>
            <div id="navbar" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Menu</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
            </div>
        </div>
    </nav>

关于html - Chrome 和 Firefox Bootstrap 导航切换不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37957481/

相关文章:

javascript - 如何正确使用 Angular-Material Tooltips 切换方法?

html - bootstrap carousel 两个幻灯片放映同时出现

javascript - Twitter Bootstrap、导航栏、下拉菜单无法正常工作

javascript - AngularJS 条件 ngStyle 不适用

javascript - 在 React Native 中创建 'Div' 和 'Span' 组件

javascript - 自定义 Bootstrap 轮播

javascript - 切换 Div 显示/隐藏

Jquery 切换一个 div 动画,同时改变一个类名

html - 如何使 Bootstrap 容器反弹

html - QTextEdit 添加缩写系统