<分区>
css - Bootstrap 3 - 如何让下拉菜单占据菜单全宽？
我有这个代码:
<nav class="navbar navbar-inverse">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="glyphicon my-icon"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>
<a href="#">value</a>
</li>
<li class="dropdown">
<ul class="dropdown-menu row">
<div class="col-xs-12">
<li>
<a href="#">value</a>
</li>
<li>
<a href="#">value</a>
</li>
</div>
</ul>
</li>
</ul>
</div>
如您所见，这是一个非常标准的 Bootstrap 菜单。 我希望子菜单填满整个菜单宽度，但我没有成功。
我有这个:
我想要这个:
提前致谢!
最佳答案
这是你的解决方案
/* CSS used here will be applied after bootstrap.css */
.nav { margin-bottom: 0; }
.nav > li.dropdown.open { position: static; }
.nav > li.dropdown.open .dropdown-menu {display:table; width: 100%; text-align: center; left:0; right:0; }
.dropdown-menu>li { display: table-cell; }
这是你的 Demo
关于css - Bootstrap 3 - 如何让下拉菜单占据菜单全宽？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42473468/