Question

我正在为共享按钮构建一个bootstrap导航。我希望它保持在同一条线上，但只适用于大屏幕。在小屏幕上，按钮位于品牌标志下方。

这是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;
}

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

Bootstrap导航右对齐保持共享按钮在同一行

1 个答案: