全宽下拉菜单
问题描述:
我有一个下拉菜单,在打开时我需要它来伸展容器的全长,我使用Twitter的引导,目前它位于象图像中全宽下拉菜单
这里是HTML
<ul id="multicol-menu" class="nav navbar-nav pull-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Stay Connected </a>
<ul class="dropdown-menu">
<div clas="row">
<li>
<div class="row">
<ul class="list-unstyled col-md-2">
<p class="submenu-title">TITLE</p>
<li><a href="#">test1-1</a></li>
<li><a href="#">test1-2</a></li>
<li><a href="#">test1-3</a></li>
</ul>
<ul class="list-unstyled col-md-2">
<p class="submenu-title">TITLE</p>
<li><a href="#">test2-1</a></li>
<li><a href="#">test2-2</a></li>
<li><a href="#">test2-3</a></li>
</ul>
<ul class="list-unstyled col-md-2">
<p class="submenu-title">TITLE</p>
<li><a href="#">test3-1</a></li>
<li><a href="#">test3-2</a></li>
<li><a href="#">test3-3</a></li>
</ul>
<ul class="list-unstyled col-md-2">
<p class="submenu-title">TITLE</p>
<li><a href="#">test3-1</a></li>
<li><a href="#">test3-2</a></li>
<li><a href="#">test3-3</a></li>
</ul>
<ul class="list-unstyled col-md-4">
<a href="#myModal" role="button" data-toggle="modal">
<img src="img/book-now-block.png" />
</a>
</ul>
</div>
</li>
</div>
</ul>
</li>
答
把这个css
可能有助于
/* 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:block; width: 100%; }
.dropdown-menu>li { display: block; }
OH MY GOD IT工作!谢谢,这已经让我头痛数小时了! – Tom
确实很棒。祝你好运 :) –