從摺疊Bootsrap中排除菜單項

Question

我已經看到幾個與此相關的問題，但沒有一個似乎解決了我的問題。我想排除一些菜單項在移動時崩潰。特別是本例中的「用戶名」項。我設法讓它工作（馬馬虎虎），但左手邊距在手機上消失。任何解決方案？

這裏是我的代碼：

<nav role="navigation" class="navbar navbar-default"> 

     <div class="navbar-header"> 

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

      <li> <a href="#"> User Name </a> </li> 

      </ul> 


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

     </div> 

     <!-- Collection of nav links and other content for toggling --> 
     <div id="navbarCollapse" class="collapse navbar-collapse"> 
      <ul class="nav navbar-nav"> 
       <li class="active"> <a href="#" data-toggle="collapse" data-target="#navbarCollapse">Home</a></li> 
       <li><a href="#" data-toggle="collapse" data-target="#navbarCollapse">Profile</a></li> 
       <li><a href="#" data-toggle="collapse" data-target="#navbarCollapse">Messages</a></li> 
       <li class="visible-xs" ><a href="#" data-toggle="collapse" data-target="#navbarCollapse">Contact Us</a></li> 
      </ul> 
      <ul class="nav navbar-nav navbar-right"> 
       <li><a href="#" data-toggle="collapse" data-target="#navbarCollapse">Login</a></li> 
      </ul> 
     </div> 
    </nav> 

謝謝！

Answer 1

使用navbar-brand，而不是這將對移動適當對齊..

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

<nav role="navigation" class="navbar navbar-default"> 
    <div class="navbar-header"> 
     <div class="navbar-brand"><a class="" href="#"> User Name </a></div> 
     <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
    </div> 

    <!-- Collection of nav links and other content for toggling --> 
    <div id="navbarCollapse" class="collapse navbar-collapse"> 
     <ul class="nav navbar-nav"> 
      <li class="active"> <a href="#" data-toggle="collapse" data-target="#navbarCollapse">Home</a></li> 
      <li><a href="#" data-toggle="collapse" data-target="#navbarCollapse">Profile</a></li> 
      <li><a href="#" data-toggle="collapse" data-target="#navbarCollapse">Messages</a></li> 
      <li class="visible-xs"><a href="#" data-toggle="collapse" data-target="#navbarCollapse">Contact Us</a></li> 
     </ul> 
     <ul class="nav navbar-nav navbar-right"> 
      <li><a href="#" data-toggle="collapse" data-target="#navbarCollapse">Login</a></li> 
     </ul> 
    </div> 
</nav>