[英]Bootstrap dropdown-menu - full width and central horizontal items
我下面的导航栏具有一个下拉菜单,其中显示<li>
元素的水平列表
<ul class="dropdown-menu">
如何确保下拉菜单的行为与div容器类相同? 即:屏幕的整个宽度与项目集中?
@import 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css';
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="true">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-left" href="/home/"><span class="logo"></span></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="navbar-collapse collapse in" id="bs-example-navbar-collapse-1" aria-expanded="true" style="">
<ul class="nav navbar-nav navbar-right">
<li class="">
<a href="/opt1/">Option 1</a>
</li>
<li class="">
<a href="/opt2/">Option 2</a>
</li>
<li class="">
<a href="/opt3/">Option 3</a>
</li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">More...<span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="">
<a href="/drop1/">Dropdown 1</a>
</li>
<li class="">
<a href="/drop2r/">Dropdown 2</a>
</li>
<li class="">
<a href="/drop3/">Dropdown 3</a>
</li>
<li class="">
<a href="/drop4/">Dropdown 4</a>
</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
看一下Bootstrap的Yamm Menu ,这就是您所需要的。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.