请你看看This Demo,让我知道为什么Snippets
上的下拉列表没有呈现在小型设备的顶层(它在大屏幕上正常工作但是如果你在电话视图中查看它,它是否隐藏在.navbar-collapse
后面?我尝试将高号z-index
添加到.droper
但它没有工作
<nav class="navbar navbar-default site-navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav menu pull-right">
<li><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li class="menu-itemb"><a href="#">Snippets</a>
<ul class="droper">
<li class="menu-item sub-menu"><a href="#">CSS</a></li>
<li class="menu-item sub-menu"><a href="#">HTML</a></li>
<li class="menu-item sub-menu"><a href="#">jQuery</a></li>
<li class="menu-item sub-menu"><a href="#">PHP</a></li>
<li class="menu-item sub-menu"><a href="#">WordPress</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
答案 0 :(得分:1)
@Wavemaster的答案是你想要引导样式时应该使用的答案。但是,如果你仍然对你的实现采取什么措施。然后你就会做这样的事情。
{{1}}
答案 1 :(得分:0)
使用theese类进行下拉列表:
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Snippets</a>
<ul class="dropdown-menu">
<li><a href="#">CSS</a></li>
<li><a href="#">HTML</a></li>
</ul>
</li>
另请参阅bootstrap documentation about navbars。
尽量避免自己设计风格。而是使用bootstrap css并在您需要的地方准确编辑它。
例如,在bootply上使用基本启动器模板并更改导航上的文本。