Bootstrap - 100％寬度的下拉菜單背景，但正常的內容寬度

Question

我希望有人能幫助我。我有下面的代碼：

<div class="navbar yamm navbar-default" role="navigation"> 
    <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" 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> 
     </div> 
     <div class="navbar-collapse collapse"> 
      <ul class="nav navbar-nav"> 
       <li class="dropdown yamm-fw"> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a> 
        <ul class="dropdown-menu"> 
         <li> 
          <div class="yamm-content"> 
           <div class="row"> 
            <div class="col-md-6"> 
             Boom 1 
            </div> 
            <div class="col-md-6"> 
             Boom 2 
            </div> 
           </div> 
          </div> 
         </li> 
        </ul> 
       </li> 
       <li><a href="#">Nav Item</a></li> 
       <li><a href="#">Nav Item</a></li> 
       <li><a href="#">Nav Item</a></li> 
       <li><a href="#">Nav Item</a></li> 
      </ul> 
      <ul class="nav navbar-nav navbar-right"> 
       <li><a href="">Login</a></li> 
      </ul> 
     </div><!--/.nav-collapse --> 
    </div> 
</div> 

這工作正常。不過，我希望將下拉菜單的背景設置爲100％寬度，但因爲下拉菜單位於容器內，所以不會顯示完整的瀏覽器寬度。

這裏你可以看到一個例子： http://www.bootply.com/9Qy8s3CqMZ 基本上我想要的內容保持它在哪裏，但灰色背景像導航確實走100％的寬度。

任何幫助？

謝謝。

CNC中 的jsfiddle鏈接 - jsfiddle.net/on0epsqw/1

Answer 1

只要改變你的.container到.container-fuid。

<div class="container-fluid">

Working Example

更新

更改.dropdown-menu類這樣的：

.dropdown-menu { 
    position: fixed; 
    top: 50px; 
    background-color:#666; 
    } 

的top值應爲您導航欄的高度。

此外，只需將類.container添加到類.yamm-content的元素。

Working Example