Ich kann keinen Container um einen Bootstrap legen. 4 navbar

Question

Ich versuche, eine Container-Klasse um meine Navbar zu legen, jedoch bewegt sich der Schalter in der Mitte in der mobilen Ansicht.

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

Um dies zu stoppen ich diesen Jquery-Code enthalten:

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

der navbar Link geht unter der Marke navbar Allerdings, und ich weiß nicht, warum. Hier

ist die Codepen

Answer 1

Wenn Sie versuchen, den grauen Hintergrund vollen Umfang nutzen zu haben und navbar im container, müssen Sie, so etwas zu tun ...

<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