Question

在我的应用程序中，我在同一页面上有两个导航栏，它们很好，但如果顶部导航栏有一个下拉列表，它会出现在第二个第二个导航栏下

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

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

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

Answer 2

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

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

2 个答案: