在自舉4

Question

我使用自舉v4和我根據http://v4-alpha.getbootstrap.com/components/navbar/創建固定頂部導航欄創建導航欄和子導航欄。

但我想要的是在導航欄中創建另一行。所以我實際上需要兩個相鄰的導航欄。

我試圖簡單地用

<nav class="navbar navbar-toggleable-md navbar-light bg-faded"> 
    <div class="collapse navbar-collapse" id="navbarSupportedContent"> 
    // first line 
    </div> 
    <div class="collapse navbar-collapse" id="navbarSupportedContent"> 
    // second line 
    </div> 
</nav> 

這樣做，但它沒有得到一個新行。它只是試圖並排添加它。

一種方式是後對方只是創建兩個導航欄，但我想第二條線是一樣的第一道防線。

Answer 1

上面的代碼有三個問題。首先，你錯過了關閉第一個<div>，這可能是爲什麼navbars坐在一起。其次，您使用重複ID navbarSupportedContent。第三，你實際上沒有任何按鈕來切換你的導航欄，所以它們根本不會出現在移動顯示屏上。

要解決在手機上能夠切換多個導航欄的問題，您需要將navbar-collapse作爲包含兩個導航欄div的單個父div。

因此，你實際上可能尋找的是這樣的：

<nav class="navbar navbar-toggleable-md navbar-light bg-faded"> 
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> 
    <span class="navbar-toggler-icon">Toggle Navigation</span> 
    </button> 
    <div class="collapse navbar-collapse" id="navbarSupportedContent"> 
    <div> 
    // first line 
    </div> 
    <div> 
    // second line 
    </div> 
    </div> 
</nav> 

我創建了一個BootPly展示這個here。

編輯：

默認情況下，引導4使用flex的導航欄，但默認情況下不實際添加所需的flex-flow。您可以解決此通過添加：

.navbar-collapse { 
    flex-flow: row wrap; 
} 

需要注意的是，你還需要一個flex-direction添加到您的行，並指定他們應該佔據柔性的寬度的100％。我給的DIV這一類flex-row（在flex.scss默認名稱）：

.flex-row { 
    flex-direction: row; 
    width: 100%; 
} 

我創建了一個新的BootPly覆蓋這個here。

希望這會有所幫助！ :)