为什么我的 Bootstrap 导航栏反应不灵敏？答案

【问题标题】：Why is my Bootstrap navigation bar not quite responsive?为什么我的 Bootstrap 导航栏反应不灵敏？
【发布时间】：2013-09-03 13:51:50
【问题描述】：

我编写了一个包含三个链接的导航栏。导航栏应该是响应式的，这意味着如果窗口变得足够小，链接应该会消失（就像它们一样），并且应该会出现一个带有三个水平线的新按钮（不会出现）。

<nav class="navbar navbar-fixed-top" role="navigation">
    <div class="navbar-inner">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">

                <button type="btn btn-navbar" class="navbar-toggle"
                    data-toggle="collapse"
                    data-target=".navbar-ex1-collapse">
                    <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="/server">APL</a>
            </div>


            <!-- Collect the nav links, forms, and other content for toggling -->
            <div
                class="collapse navbar-collapse navbar-ex1-collapse">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="impressum.html">Impressum</a></li>
                    <li class="active"><a href="documentation.html">Documentation</a></li>
                </ul>
            </div>
        </div>
    </div>
</nav>

为什么以下 JSFiddle 演示中的按钮保持不可见（相同的标记）？

http://jsfiddle.net/BaR3q/22/

【问题讨论】：

是否包含折叠插件？在您共享的小提琴上，没有引导 js，折叠功能需要它才能工作。
啊，我忘了包括那个。好的，我刚刚更新了演示代码，但行为并没有改变。

标签： css twitter-bootstrap responsive-design twitter-bootstrap-3 navbar

【解决方案1】：

菜单按钮在那里，但它是白色的，所以您看不到它。

将navbar-inverse 类添加到导航栏并显示：

http://jsfiddle.net/BaR3q/23/

更新

您最初的问题只问“为什么下面的 JSFiddle 演示中的按钮保持不可见” 而我上面的 jsfiddle 示例解决了这个问题。但是根据您在下面的评论，我再次查看了您的 jsfiddle。

菜单按钮没有切换菜单的原因是您没有指向bootstrap.min.js 的有效链接，也没有预加载jQuery。添加两者后，您可以看到您的演示作品：http://jsfiddle.net/BaR3q/25/

【讨论】：

我刚刚重新检查了您的建议。尽管现在显示了菜单按钮，但它不包含任何元素。链接仍然丢失。
嗯，你的问题明确地说“为什么下面的 JSFiddle 演示中的按钮保持不可见”，这就是我的回答。要使按钮显示和隐藏菜单，您必须初始化正确的 JavaScript 插件

【解决方案2】：

这是一个 JsFiddle 问题。

我已经有了这个，带有一个 Bootstrap-3 导航栏。您的代码完美运行，您可以在空白文件中尝试。您还可以复制粘贴 Bootstrap-3 导航栏示例以查看问题。

A working JSBin.

【讨论】：

其实不是jsFiddle的问题，是用户的问题。原始 jsFiddle 示例不包含 jQuery 并且指向 bootstrap.min.js 的链接无效
相同的结果，各种原因。指出断开的链接做得很好。

【解决方案3】：

Bootstrap 的 JavaScript 在 jsFiddle 中链接不正确。它是在没有 http:// 的情况下添加的，并且链接到 jsfiddle.net。

另外，Bootstrap 的 JavaScript 需要 jQuery，但 Fiddle 没有包含它。

我修复了对 Bootstrap JS 的引用并添加了 jQuery 作为依赖项。我还反转了导航栏上的颜色，以便您可以使用navbar-inverse 更轻松地看到它。一切都很好：

http://jsfiddle.net/BaR3q/24/

【讨论】：

【解决方案4】：

我将您的菜单代码放入我的样板 BS3 导航栏模板中，它可以工作。在 Firefox 17、Chrome 29 和 IE8 中测试（我的环境必须支持 IE8，所以我也提供了一些相关信息）。如果您还有其他需要或有任何疑问，请告诉我。

更新：JSFiddle Demo

<!DOCTYPE HTML>

<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title>Bootstrap Sample</title>

<link rel="stylesheet" href="css/bootstrap.min.css">

<script src="js/jQuery.js"></script>
<script src="js/bootstrap.min.js"></script>
<!--
SET UP THE FOLLOWING FOR YOUR ENVIRONMENT IF YOU WANT TO SUPPRT IE8.
See https://github.com/scottjehl/Respond for more. Note that the Respond.js script 
will not function locally in IE8 due to browser security restrictions.
-->
<script src="js/respond.min.js"></script>
<!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

</head>

<body>

    <nav class="navbar navbar-default" role="navigation">
        <div class="navbar-header">
            <button type="btn btn-navbar"
                class="navbar-toggle"
                data-toggle="collapse"
                data-target=".navbar-ex1-collapse">
                <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="/server">APL</a>
        </div>

        <div class="collapse navbar-collapse navbar-ex1-collapse">
            <ul class="nav navbar-nav">
                <li><a href="impressum.html">Impressum</a></li>
                <li><a href="documentation.html">Documentation</a></li>
            </ul>
        </div>
    </nav>

</body>
</html>

【讨论】：