在移動視圖中以居中標誌爲中心的引導程序導航

我有一個具有兩個不同菜單的引導程序導航欄。一個居中，一個在右邊。該徽標顯示在左側。在移動視圖中以居中標誌爲中心的引導程序導航

在移動視圖中，兩個菜單都已摺疊。這是唯一的方法，我得到桌面視圖以我想要的方式工作。

但我真正想要在移動視圖中的是左側的摺疊按鈕，徽標居中，第二個菜單在右側。

有沒有一種很好的方法來實現這一點？

桌面瀏覽： | LOGO | MENU 1 |菜單2 |

手機瀏覽： |菜單1摺疊按鈕| LOGO |菜單2 |

這裏是我的實際代碼：

<nav class="navbar navbar-default navbar-fixed-top"> 
<div class="container-fluid"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main-navbar-collapse"> 
      <span class="sr-only">Collapse</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     <a href="" class="navbar-brand" title=""><img src="LOGO" /></a> 
    </div> 

    <div class="collapse navbar-collapse" id="main-navbar-collapse"> 

     <ul class="nav navbar-nav"> 
      /// MENU 1 - Mobile view collapsed 
     </ul> 

     <ul class="nav navbar-nav navbar-right"> 
      /// MENU 2 - Mobile view right 
     </ul> 
    </div> 

</div> 
</nav>

來源

2014-10-08 Cray

你可以嘗試這樣的事情，但它需要自定義CSS來實現崩潰navbar ..

<nav class="navbar navbar-default"> 
    <div class="navbar-header"> 
     <a class="navbar-brand" href="#">Logo</a> 
     <a class="navbar-toggle navbar-link pull-left" data-toggle="collapse" data-target=".navbar-collapse"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </a> 
    </div> 
    <ul class="nav navbar-nav navbar-right pull-right"> 
    <li><a href="#">Menu2</a></li> 
    <li><a href="#">Right</a></li> 
    </ul> 
    <div class="collapse navbar-collapse" id="collapsed-navigation"> 
     <ul class="nav navbar-nav navbar-left"> 
     <li><a href="#">Menu1</a></li> 
     <li><a href="#">Left</a></li> 
     <li><a href="#">Left</a></li> 
     </ul> 
    </div><!-- /.navbar-collapse --> 
</nav>

工作演示：http://www.bootply.com/pOdynPWRbt

來源

2014-10-08 10:23:42 ZimSystem

以及我不知道正確的方式，但我認爲下面的解決方案應該工作

創建一個div和地方| LOGO | MENU 1 |在那個div裏，讓它浮起來。

現在

在媒體查詢手機只是使標識浮動權，它會解決你的問題

桌面視圖：| | LOGO | MENU 1 ||菜單2 |

手機瀏覽：||菜單1摺疊按鈕| LOGO ||菜單2 |

來源

2014-10-08 09:29:00 himanshu

在移動視圖中以居中標誌爲中心的引導程序導航

回答

相關問題