правая навигационная панель bootstrap не рушится

Question

Я использую Bootstrap 3, я использую верхнюю панель навигации и левую навигационную панель, я хочу, чтобы она работала нормально и для мобильных устройств, когда я сворачиваю страницу справа налево, тогда моя верхняя навигация работает нормально, и отображаются обе кнопки, но моя левая навигационная панель не исчезает, она появляется и исчезает при нажатии кнопки.

Это jsfiddle

Это код:

<!-- Fixed navbar --> 
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
    <div class="container nav-main"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" 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> 

     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#sidebar" role="complementary" > 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 


     <span class="navbar-brand">Business Name Test </span> 
    </div> 
    <div class="navbar-collapse collapse"> 
     <ul class="nav navbar-nav navbar-right"> 
      <li> 
       <a href="/Settings"><span class="glyphicon glyphicon-cog"></span> Settings</a> 
      </li> 
      <li> 
       <a href="/Help"><span class="glyphicon glyphicon-question-sign"></span> Help</a> 
      </li> 
      <li> 
       <a href="/Account/LogOff"><span class="glyphicon glyphicon-log-out"></span> Logout</a> 

      </li> 
     </ul> 
    </div><!--/.nav-collapse --> 
    </div> 
</div> 

    <div class="container main"> 
     <div class="row"> 
      <div class="col-md-2 col-sm-2 col-lg-2" id="sidebar" role="complementary" > 
       <div class="m-sidebar"> 

<ul class="nav"> 
    <li><a href="#" rel="tooltip" title="Link1">Link1</a></li> 
    <li class="divider"></li> 
    <li><a href="#" rel="tooltip" title="Link2">Link2</a></li> 
    <li><a href="/Messages" rel="tooltip" title="Link3">Link3</a></li> 
    <li class="divider"></li> 
    <li><a href="/Inventory" rel="tooltip" title="Link 4">Link 4</a></li> 
    <li><a href="/Inventory" rel="tooltip" title="Link 4">Link 5</a></li> 
    <li><a href="/Inventory" rel="tooltip" title="Link 4">Link 6</a></li> 
    <li><a href="/Inventory" rel="tooltip" title="Link 4">Link 7</a></li> 

    </ul> 
</div> 
      </div> 
      <div class="col-md-10 col-sm-10 col-lg-10"> 
    <div class="page-header"> 
      <h1>Home Page</h1> 
    </div> 
      </div> 
      </div> 
     </div><!-- /container --> 

Answer 1

Вместо того, чтобы использовать только

<ul class="nav"> 

для левых элементов используют:

<ul class="nav navbar-nav navbar-left"> 

скрипку: http://jsfiddle.net/FDkqT/

Это устраняет все ваши проблемы