下拉导航栏显示在同一页上的第二个导航栏下
在我的应用程序中,我有两个导航栏在同一页上,他们很好,除非顶部导航栏有一个下拉菜单,它出现在第二个导航栏下下拉导航栏显示在同一页上的第二个导航栏下
顶部导航器允许用户选择文档的视图,而较低的导航器定义用户可以在该视图中执行的操作。有没有办法让下拉菜单位于第二个导航器之上。 这里是产生这种代码:
<!-- 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>
感谢Frank的解决方案是简单的添加!两个班的z-index设置背后很重要的。显然,还有其他的东西超越了Z-index属性。无论如何,现在工作正常。
由于它是有帮助 –
这确实是一个自举具体的问题。 XPages并不真正在这里发挥作用。弗兰克提到的问题中有很好的信息。就我个人而言,我会尝试创建一个类来覆盖z-index并将其添加到底部的navBar。使Z指数低于顶部。我认为这会纠正这个问题。
我试过这个,但没有得到的地方。在我的CSS中,我创建了覆盖。一个叫.navbar-view和另一个navbar动作。它们是相同的,几乎与弗兰克链接中显示的一样。两者之间的唯一区别是在.navbar-action中我有z-index:-1;并且在navbar-view中没有对z-index的引用。 navbar-view是最好的一个。 整个条目是: .navbar动作{ 背景色:#b3e6b3; 颜色:#336699; border-radius:0; margin-bottom:1px; margin-top:1px; \t z-index:-1; } 所以从我读过的东西看来,这应该可以工作。 –
可能是你还应该加上一个正的z-index到.navbar视图 –
或把!的z-index的背后重要的,所以你一定的z-index的不是在引导CSS某处重写 –
请向我们展示您的代码示例。 – Gareth
可能是这可以帮助,http://*.com/questions/12653598/twitter-bootstrap-dropdown-popping-under-elements –