多个导航栏,两个折叠按钮都可以工作,只有一个显示

Question

所以我有两个导航栏,第一个是倒置的,另一个是默认的.两者都使用折叠按钮功能并正常工作,但默认导航栏中的那个没有显示.我的意思是,它就在那里,但它有点看不见:这是我的代码:

<div class="container main-container">
<nav class="navbar navbar-static-top navbar-inverse navigation" role="navigation">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".top-nav">
        <span class="sr-only">Toggle Navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
    <div class="collapse navbar-collapse top-nav">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">News</a></li>
            <li><a href="#">About Us</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>
</nav>


...


<nav class="navbar navigation" role="navigation">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".main-nav">
            <span class="sr-only">Toggle Navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <div class="collapse navbar-collapse main-nav">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">News</a></li>
                <li><a href="#">About Us</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </nav>
</div>

我的猜测是,第二个切换按钮以某种方式从fisrt中选择样式并且没有"意识到"它应该使用默认颜色进行渲染.我该如何解决这个问题？这是一个显示行为的小提琴.

提前致谢.

Answer 1

你错过了navbar-default第二个导航栏中的类,你也应该使用一个navbar-header容器来切换按钮.

请参阅此演示文件,了解更新的标记