菜單下方的標誌

Question

我想創建一個類似this菜單（在移動模式下重）：

在「桌面」模式，我想品牌標誌，左邊換句話說，菜單在右邊。 在「移動」模式下，我會用一個標誌和其他文字塊，並在菜單下面應該佔據整行。

任何建議獲取此結果？

鏈接JsFiddle

正如你可以看到我定義了一些CSS的ID，只是爲了有：

display:block 

一爲的標誌+字容器（左側）和一個用於菜單的容器（在右邊）。

它不起作用，因爲我不知道如何將菜單放在品牌名稱下方，當我處於移動模式時。

Answer 1

我希望這是你正在尋找的結果是：

的CSS添加

@media screen and (max-width: 768px) { 
    #logo { 
    display: inline-block; 
    float: none; 
    width:100%; 
    text-align:center; 
    } 
    #nav-logo { 
    display: inline-block; 
    float: none; 
    width:100%; 
    text-align:center; 
    } 
    .navbar-header button { 
    float:none; 
    margin:15px 0px; 
    } 
} 

JSFiddle example

如果你想上面的菜單，反轉​​HTML塊id="nav-logo"和id="logo"。 .. the updatade JSFiddle here.