引導導航右對齊，將共享按鈕保持在同一行

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-left”，然后應用以下類來共享按鈕部分。

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

在這里查看

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