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

Question

在我的应用程序中，我在同一页面上有两个导航栏，它们工作正常，除了如果顶部导航栏有下拉菜单，它会出现在第二个第二个导航栏下方

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

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

Answer 1

这确实是一个 bootstrap 具体问题。 XPages 在这里并没有真正发挥作用。弗兰克链接到的问题中有很好的信息。就我个人而言，我会尝试制作一个 class 来覆盖 z-index 并将其添加到底部导航栏。使 z-index 低于顶部。我认为这会解决问题。

Answer 2

感谢 Frank，解决方案是简单地在两个类中的 z-index 设置后面添加 !important。显然还有其他东西覆盖了 z-index 属性。无论如何现在都可以正常工作。

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

Drop down on navbar is displayed under a second navbar on the same page

navbar

xpages

twitter-bootstrap