引导导航右对齐，将共享按钮保持在同一行

Question

I am building a bootstrap nav for share buttons. I want it to stay on the same line but that only works on a big screen. On a small screen the buttons go below the brand sign.

Here is the 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>

And here is a fiddle: http://jsfiddle.net/44t9ud4e/

Answer 1

Pull the brand section left by ".pull-left" and apply following class to share button section.

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

Check it out 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>