メニューアイコンの横に要素が左右にあるブートストラップnavbar

Question

ブートストラップを備えたnavbarを構築しようとしています。である（

1. バーの右側にあるバー
2. ラベル要素の左側にクローズアイコンが、それは、メニューアイコンに左に配置する必要があります：私のナビゲーションバーには、2つの要素を持っている必要があります小さなデバイスに表示されます）。何のメニューアイコンがない場合は、label要素がちょうどバー

の右側にする必要がありますこれは私がこれまで試したものです：

JSFiddle：http://jsfiddle.net/0jejx693/1/

<nav class="navbar navbar-default"> 
    <div class="container-fluid"> 

     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 

      <ul class="nav navbar-nav nav-pills navbar-right"> 
       <li><a class="navbar-brand"><i class="fa fa-power-off"></i></a></li> 
       <li> 
       <a href="/link"> 
        <span class="label"><i class="fa fa-commenting"></i> 10</span> 
       </a> 
      </li> 
      </ul> 
     </div> 

    </div> 
</nav> 

結果は次のようになりますので：

小さな

| [icon]         [lable] [menu] | 

大きな

| [icon]           [lable] | 

Answer 1

フィドルが更新されました。うーん、私はスパンから "ラベル"クラスを削除しましたが、 "ファ"アイコンが表示されませんでした。だから、テストのためだけだった。そして、トグルメニューに残っているラベルがあります。私はそれがあなたが望むものだと思います、そうですか？

http://jsfiddle.net/kqemk0zk/

.label-cont{ 
    position: absolute!important; /*Important used only to example. Could be overrated with hierarchy*/ 
    right: 60px; 
} 

Answer 2

このような何か？

<nav id="mainNav" class="navbar navbar-default navbar-fixed-top affix-top"> 
      <div class="container-fluid"> 
       <!-- Brand and toggle get grouped for better mobile display --> 
       <div class="navbar-header"> 
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
         <span class="sr-only">Toggle navigation</span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
        </button> 
        <a class="navbar-brand page-scroll" href="#page-top"><i class="fa fa-power-off"></i></a> 
       </div> 

       <!-- Collect the nav links, forms, and other content for toggling --> 
       <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
        <ul class="nav navbar-nav navbar-right"> 
         <li> 
           <a href="/link"> 
              <span class="label"><i class="fa fa-commenting"></i> 10</span> 
             </a> 
         </li> 
        </ul> 
       </div> 
       <!-- /.navbar-collapse --> 
      </div> 
      <!-- /.container-fluid --> 
     </nav>