Bootstrap 3中的全寬子菜單，不使用MegaMenu

我有一個簡單的頂部固定導航使用Bootstrap 3.0，它利用子菜單功能。我試圖讓我的子菜單佔據容器的整個寬度，而不僅僅是組合的子菜單元素的寬度。該問題似乎來自ul.dropdown-menu代碼，其中寬度設置爲〜160px;不僅如此，它拒絕向左延伸，通過下拉菜單選項卡。這是一個問題，因爲我的collapse-nav被設置爲坐在右側。 Oy公司。Bootstrap 3中的全寬子菜單，不使用MegaMenu

下面是我目前的解決方案的小提琴。

FIDDLE FIDDLE, YA'LL

HTML：

<div class="navbar navbar-default navbar-fixed-top" role="navigation"> 

    <div class="container"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
     <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-brand" href="index.html"></a> 
    </div> 
    <div class="navbar-collapse collapse pull-right"> 
     <ul class="nav navbar-nav"> 
     <li class="dropdown active"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Films <b class="caret"></b></a> 
      <ul class="dropdown-menu"> 
      <div class="container"> 
       <ul class="list-inline"> 
       <li class="placeholder" id="pause"><a href="#"></a></li> 
       <li class="placeholder" id="hiccup"><a href="#"></a></li> 
       <li class="placeholder"><a href="#"></a></li> 
       <li class="placeholder"><a href="#"></a></li> 
       <li class="placeholder"><a href="#"></a></li> 
       <li class="placeholder"><a href="#"></a></li> 
       </ul> 
      </div> 
      </ul> 
     </li> 
     <li><a href="#about">About</a></li> 
     <li><a href="#contact">Contact</a></li> 
     </ul> 
    </div><!--/.nav-collapse --> 
    </div> 
</div>

CSS（抱歉它是如此具體，我使用SASS）：

.navbar.navbar-default.navbar-fixed-top { 
    background-color: #454545; 
    border: none; 
    } 
.navbar.navbar-default.navbar-fixed-top .container .navbar-collapse.collapse.pull-right ul.nav.navbar-nav li.active a, .navbar.navbar-default.navbar-fixed-top .container .navbar-collapse.collapse.pull-right ul.nav.navbar-nav li a:hover { 
    color: #ffcc00; 
    background-color: #454545; 
    height: inherit; 
    } 
.navbar.navbar-default.navbar-fixed-top .container .navbar-collapse.collapse.pull-right ul.nav.navbar-nav li.dropdown.active.open ul.dropdown-menu { 
    list-style-type: none; 
    width: 100%; 
    background-color: white; 
    } 
.navbar.navbar-default.navbar-fixed-top .container .navbar-collapse.collapse.pull-right ul.nav.navbar-nav li.dropdown.active.open ul.dropdown-menu .container { 
    background-color: white; 
    } 
.navbar.navbar-default.navbar-fixed-top .container .navbar-collapse.collapse.pull-right ul.nav.navbar-nav li.dropdown.active.open ul.dropdown-menu .container ul.list-inline { 
    list-style-type: none; 
    width: 100%; 
    } 
.navbar.navbar-default.navbar-fixed-top .container .navbar-collapse.collapse.pull-right ul.nav.navbar-nav li.dropdown.active.open ul.dropdown-menu .container ul.list-inline li.placeholder { 
    margin: 0 20px; 
    height: 100px; 
    width: 70px; 
    background-color: #999999; 
    }

到目前爲止最接近的解決方案，我已經遇到的在下拉菜單中添加一個容器，但是我仍然無法將下拉菜單擴展到〜160px寬度。

總體目標是擁有一個全寬下拉菜單。目前不擔心它在移動設備上的外觀。

感謝

來源

2013-11-24 itsclarke