Bootstrap導航對齊保持共享按鈕在同一行上

Question

我正在爲共享按鈕構建引導程序導航。我希望它保持在同一行，但只能在大屏幕上工作。在小屏幕上，按鈕位於品牌標誌下方。

下面是HTML：

<header>  
    <nav class="navbar navbar-default" role="navigation"> 
     <div class="container-fluid"> 
      <div class="navbar-header"> 
      <a class="navbar-brand" href="http://www.tageswoche.ch"> 
      <img alt="Tageswoche" src="logo-tw.png"> 
      </a> 
      </div> 
      <ul class="nav navbar-nav navbar-right"> 
        <li><a id="shareemail"><img src="email.png" class="share"></a></li> 
        <li><a id="sharetwitter"><img src="twitter.png" class="share"></a></li> 
        <li><a id="sharefb"><img src="facebook.png" class="share"></a></li> 
      </ul> 
     </div> 
    </nav> 
</header> 

這裏是一個小提琴：http://jsfiddle.net/44t9ud4e/

Answer 1

通過拉「.pull左」左品牌節，並應用下面的類分享按鈕部分。

.right-bar>li, .right-bar { 
    float: right !important; 
} 

檢查出來here

<header>   
<nav class="navbar navbar-default" role="navigation"> 
    <div class="container-fluid"> 
    <!-- pull-left class added here --> 
    <div class="navbar-header pull-left"> 
     <a class="navbar-brand" href="http://www.tageswoche.ch"> 
     <img alt="Tageswoche" src="http://labs.tageswoche.ch/geschichten/img/logo-tw.png"> 
     </a> 
     </div> 
     <!-- right-bar class added here --> 
     <ul class="nav navbar-nav navbar-right right-bar"> 
      <li><a id="shareemail"><img src="http://labs.tageswoche.ch/geschichten/img/email.png" class="share"></a></li> 
     <li><a id="sharetwitter"><img src="http://labs.tageswoche.ch/geschichten/img/twitter.png" class="share"></a></li> 
     <li><a id="sharefb"><img src="http://labs.tageswoche.ch/geschichten/img/facebook.png" class="share"></a></li> 
     </ul> 
    </div> 
</nav> 
</header>