Chrome 和 Firefox Bootstrap 导航切换不工作

Question

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

我已经尝试运行在 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>

Answer 1

您的代码没有错误。但我猜你在调用 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>

Answer 2

发生这种情况是因为 Bootstrap 版本之间存在很多差异。很少有类只适用于少数 Bootstrap 版本。因此，在将 link 添加到 HTML 文件时，请注意您正在使用的 Bootstrap 版本。

问题： 我想，您编写的代码和您 link 编辑的 Bootstrap 版本不匹配。

解法： 以下是不同版本的 links 和 Starter 模板。参考那些并在 linking 到 HTML 时更改版本。您必须将 CSS 和 Bootstrap 的 Script 文件包含到 HTML.

Chrome 和 Firefox Bootstrap 导航切换不工作

Chrome and Firefox Bootstrap nav toggle not working

html

toggle

navbar

twitter-bootstrap