css - 为什么我的 Bootstrap 导航栏 react 不太灵敏？

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/