0

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

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

4

4 回答 4

7
于 2013-09-03T19:55:26.997 回答
0

这是一个 JsFiddle 问题。

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

一个工作的 JSBin。

于 2013-09-10T15:24:50.440 回答
0

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

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

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

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

于 2013-09-10T15:30:48.867 回答
0

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

更新：JSFiddle 演示

<!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>
于 2013-09-12T17:34:42.933 回答