Bootstrap 3 - 如何讓下拉菜單佔據菜單全寬？

Question

我有這樣的代碼：

<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> 

正如你可以看到，這是一個非常標準的引導菜單。 我想要子菜單來填充整個菜單寬度，但我沒有成功。

我有這樣的：

我想這一點： 提前感謝！

Answer 1

這裏是您的解決方案

/* 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