メニュー項目を折りたたみから除外する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>