Twitter Bootstrap 3 Ошибка отображения Navbar

Question

Добрый день, ребята, у меня была небольшая проблема в крафте navbar. Он не выравнивается с правой стороны браузера, когда я нажал кнопку свернуть?

<div class="navbar navbar-inverse navbar-static-top"> 

<div class="container"> 

    <a href="#" class="navbar-brand">My Site</a> 

    <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse"> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 

    </button> 

    <div class="collapse navbar-collapse navHeaderCollapse"> 
     <ul class="nav navbar-nav navbar-right"> 
      <li><a href="#">Home</a></li> 
      <li><a href="#">About</a></li> 
      <li><a href="#">Contacts</a></li> 


      <li class="dropdown"> 

      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Login<b class="caret"></b></a> 

      <ul class="dropdown-menu"> 
      <li><a href="#">Logout</a></li> 
      <li><a href="#">Logout</a></li> 
      <li><a href="#">Logout</a></li>     

      </ul> 


      </li> 
     </ul> 
    </div> 

</div> 

Sample output

Answer 1

Вам нужно обернуть кнопку свернуть и связь бренда в .navbar-header:

<div class="navbar navbar-inverse navbar-static-top"> 
<div class="container"> 
    <div class="navbar-header"> 
     <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     <a href="#" class="navbar-brand">My Site</a> 
    </div> 

    <div class="collapse navbar-collapse navHeaderCollapse"> 
     <ul class="nav navbar-nav navbar-right"> 
      <li><a href="#">Home</a></li> 
      <li><a href="#">About</a></li> 
      <li><a href="#">Contacts</a></li> 

      <li class="dropdown"> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown">Login<b class="caret"></b></a> 
       <ul class="dropdown-menu"> 
        <li><a href="#">Logout</a></li> 
        <li><a href="#">Logout</a></li> 
        <li><a href="#">Logout</a></li>     
       </ul> 
      </li> 
     </ul> 
    </div> 
</div> 

Answer 2

Вы должны использовать navbar-header, то у вас есть brand и значок гамбургер на одинакового уровня и всего содержимого вашего меню ниже этой строки. Поэтому в основном ваш код должен выглядеть примерно так:

<div class="navbar-header"> 
    <a href="#" class="navbar-brand">My Site</a> 

    <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
    </button> 
</div> 

Ссылка жить пример: http://www.bootply.com/jowa705iHl

Здесь вы можете найти всю необходимую документацию: http://getbootstrap.com/components/#navbar

удачи :)