Question

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

<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/

Answer 1

菜单按钮在那里，但它是白色的，所以你无法看到它。

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

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

<强>更新

您的原始问题仅询问“为什么以下JSFiddle演示中的按钮保持不可见”并且上面的jsfiddle示例解决了这个问题。但根据你下面的评论，我再次看了你的jsfiddle。

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

Answer 2

这是一个JsFiddle问题。

我已经使用Bootstrap-3导航栏获得了这个。您的代码完美无缺，您可以在空白文件中尝试它。您还可以复制粘贴Bootstrap-3导航栏示例以查看问题。

A working JSBin.

Answer 3

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

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

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

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

Answer 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>

为什么我的Bootstrap导航栏不是很响应？

4 个答案: