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>