引導導航欄時不倒塌

Question

Plunkr

如果你點擊菜單項的引導導航欄菜單沒有在默認情況下小屏幕崩潰閃爍。

我將data-toggle="collapse"和data-target="#navbar-collapse"添加到每個菜單項，以便在選擇菜單項時菜單將摺疊。

到目前爲止這麼好，但我注意到即使屏幕尺寸很大也會閃爍，並且導航欄項目不在三明治菜單中。我想這是崩潰動畫。

我的問題是有什麼辦法來防止這種閃爍/禁用動畫與CSS？我知道我可能會用jQuery殺死動畫，但我寧願避免這種情況，因爲整個應用程序都是在Angular中構建的，我認爲這不是一個罕見的用例。

Answer 1

希望這對你已經擁有的代碼來說不是多餘的，但是你沒有提到它，所以我會假設你沒有它。

有你持有中navbar navbar-default整個事情，然後把裏面的一個container-fluid DIV你的主要DIV，之後把這個權利：

<div class="navbar-header"> 
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navBodyId" aria-expanded="false"> 
    <span class="sr-only">Toggle navigation</span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    </button> 
    <a class="navbar-brand" href="#">Page Title</a> 
</div> 

然後你可以有你的導航條是這樣的：

<div class="collapse navbar-collapse" id="navBodyId"> 
    <ul class="nav navbar-nav"> 
    ... 
    </ul> 
</div> 

然後關閉我在頂部提到的2件事。

您不應該摺疊菜單的每個部分。希望這有助於，如果不是的話，Bootstrap網站是一個非常好的資源，他們有很多源代碼示例，但我相信你知道這一點。