全寬下拉菜單

Question

我有一個下拉菜單，在打開時我需要它來伸展容器的全長，我使用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> 

Answer 1

把這個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; }