Twitter bootstrap 导航栏上的下拉菜单显示在同一页面的第二个导航栏下

在我的应用程序中，我在同一页上有两个导航栏，它们工作得很好，只是如果顶部导航栏有一个下拉菜单，它会显示在第二个导航栏下

顶部导航器允许用户选择文档视图，而下部导航器定义用户在该视图中可以执行的操作。有没有办法让下拉列表位于第二个导航器的顶部。 以下是生成此代码的代码：

    <!-- first nav -->
    <nav class='navbar navbar-default'>
        <div class="container-fluid">
            <div class='navbar-header'>
                <button type='button' class='navbar-toggle' data-toggle='collapse'
                    data-target='#firstNavbar'>
                    <span class='icon-bar'></span>
                    <span class='icon-bar'></span>
                    <span class='icon-bar'></span>
                </button>
                <div class='hidden-sm hidden-md hidden-lg'>
                    <a class="navbar-brand">first</a>
                </div>
            </div><!-- navbar-header -->
            <div class='collapse navbar-collapse' id='firstNavbar'>
                <ul class="nav nav-pills">
                    <li role="presentation">
                        Item One
                    </li>
                    <li role="presentation">
                        Item Two
                    </li>
                    <li role="presentation">
                        Item Three
                    </li>
                    <li class="dropdown">
                        <a class="dropdown-toggle" style="background-color:orange"
                            data-toggle="dropdown" href="#">
                            Manager Option
                            <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                            <li role="presentation">
                        Option One
                    </li>
                    <li role="presentation">
                        Option Two
                    </li>
                    <li role="presentation">
                        Option Three
                    </li>
                    <li role="presentation">
                        Option Four
                    </li>
                    <li role="presentation">
                        Option Five
                    </li>
                        </ul>
                    </li>

                </ul>
            </div><!-- collapse -->
        </div><!-- container -->
    </nav>


<nav class='navbar navbar-default'>
        <div class="container-fluid">
            <div class='navbar-header'>
                <button type='button' class='navbar-toggle' data-toggle='collapse'
                    data-target='#secondNavbar'>
                    <span class='icon-bar'></span>
                    <span class='icon-bar'></span>
                    <span class='icon-bar'></span>
                </button>
                <div class='hidden-sm hidden-md hidden-lg'>
                    <a class="navbar-brand">second Nav Bar</a>
                </div>
            </div><!-- navbar-header -->
            <div class='collapse navbar-collapse' id='secondNavbar'>
                <ul class="nav nav-pills">
                    <li role="presentation">
                        Item One
                    </li>
                    <li role="presentation">
                        Item Two
                    </li>
                    <li role="presentation">
                        Item Three
                    </li>
                    <li role="presentation">
                        Item four
                    </li>
                    <li role="presentation">
                        Item five
                    </li>
                    <li role="presentation">
                        Item six
                    </li>

                </ul>
            </div><!-- collapse -->
        </div><!-- container -->
    </nav>

选择一


选择二


选择三


选择四


选择五




第二导航条


项目一


项目二


项目三


项目四


项目五


项目六

这确实是一个特定于引导的问题。XPages在这里并没有真正发挥作用。弗兰克所涉及的问题中有很好的信息。就我个人而言，我会尝试创建一个类来覆盖z索引，并将其添加到底部导航栏。使z指数低于顶部指数。我认为这会纠正这个问题。

多亏了Frank，解决方案就是简单地添加！这两个类中z索引设置的背后很重要。显然，在z-index属性之上还有其他一些东西。不管怎样，现在一切正常

请给我们看一个你的代码的例子。也许这会有帮助，我已经试过了，但没有结果。在我的css中，我创建了覆盖。一个名为.navbar视图，另一个名为navbar操作。它们是相同的，与弗兰克的链接中显示的非常相似。两者之间唯一的区别是，在.navbar操作中，我有z-index:-1；并且在导航栏视图中不引用z索引。导航栏视图位于顶部。整个条目是：.navbar操作{背景颜色：#b3e6b3；颜色：#336699；边框半径：0；边距底部：1px；边距顶部：1px；z-index:-1；}所以从我所读的内容来看，这似乎应该有效。可能您还应该在.navbar视图或put中添加一个正的z-index！在z索引后面很重要，因此您可以确保z索引不会在引导css中的某个位置被覆盖