我不能把一個容器放在引導程序周圍4 navbar

Question

我想把一個容器類放在我的導航欄周圍，但是，切換移動到移動視圖的中心。

<nav class="navbar navbar-toggleable-md navbar-light bg-faded" id="commRollover"> 
    <div class="container"> 
     <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> 
     <span class="navbar-toggler-icon"></span> 
     </button> 
     <a class="navbar-brand" href="#"><img src="img/qube_navbar_brand.webp" width="126px" height="54px"></a> 
     <div class="collapse navbar-collapse justify-content-end" id="navbarNav"> 
     <ul class="navbar-nav"> 
      <li class="nav-item active"> 
      <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> 
      </li> 
      <li class="nav-item"> 
      <a class="nav-link" href="#">Features</a> 
      </li> 
      <li class="nav-item"> 
      <a class="nav-link" href="#">Pricing</a> 
      </li> 
      <li class="nav-item"> 
      <a class="nav-link disabled" href="#">Disabled</a> 
      </li> 
     </ul> 
     </div> 
    </div> 

    </nav> 

要停止這個我包括這jQuery代碼：

if ($(window).width() < 960) { 
    $("#commRollover .container").removeClass("container"); 
} 

但是，導航欄鏈接進入導航欄下面的品牌，我不知道爲什麼。

這裏是Codepen

Answer 1

如果你想有container內的灰色背景全屏和navbar，你需要做這樣的事情......

<div class="bg-faded"> 
    <div class="container"> 
     <nav class="navbar navbar-toggleable-md navbar-light" id="commRollover"> 
      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> 
       <span class="navbar-toggler-icon"></span> 
      </button> 
      <a class="navbar-brand" href="#"><img src="img/qube_navbar_brand.webp" width="126px" height="54px"></a> 
      <div class="collapse navbar-collapse justify-content-end" id="navbarNav"> 
       <ul class="navbar-nav"> 
        <li class="nav-item active"> 
         <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> 
        </li> 
        <li class="nav-item"> 
         <a class="nav-link" href="#">Features</a> 
        </li> 
        <li class="nav-item"> 
         <a class="nav-link" href="#">Pricing</a> 
        </li> 
        <li class="nav-item"> 
         <a class="nav-link disabled" href="#">Disabled</a> 
        </li> 
       </ul> 
      </div> 
     </nav> 
    </div> 
</div> 

http://www.codeply.com/go/bCO20TFmYw