Я не могу положить контейнер вокруг загрузочного устройства 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"); 
} 

Однако связь Navbar идет под брендом NavBar, и я не знаю, почему.

Вот Codepen

Answer 1

Если вы пытаетесь иметь серый фон на полный экран и navbar внутри container, вы должны были бы сделать что-то вроде этого ...

<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