Bootstrap導航欄的右側和左側的菜單圖標旁邊的元素

我想用bootstrap構建一個導航欄。我的導航欄應該有兩個要素：Bootstrap導航欄的右側和左側的菜單圖標旁邊的元素

上欄的右側欄
標籤元素的左側關閉圖標，但它應該放在左邊的菜單圖標（這是顯示在小設備上）。如果沒有菜單圖標，標籤元素應該只是在酒吧

這右邊是我試過到目前爲止：

的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] |

來源

2016-05-09 user3142695

所以你要在拉布勒手機屏幕旁邊的菜單圖標？ –

@Leothelion是的，正確的 – user3142695

更新的小提琴。嗯，因爲我刪除了「標籤」類跨度，但它沒有顯示「fa」圖標。所以，只是爲了測試。而且，還有一個標籤留給切換菜單。我想這就是你想要的，對嗎？

http://jsfiddle.net/kqemk0zk/

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

來源

2016-05-09 12:27:20

像這樣的事情？

<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>

來源

2016-05-09 09:00:59 JMF

我認爲在你的代碼中，標籤元素位於菜單內部，將在移動視圖中切換。但它應該在此之外。從菜單元素左側放置（在移動視圖上）。 – user3142695

Bootstrap導航欄的右側和左側的菜單圖標旁邊的元素

回答

相關問題