如何更改導航欄摺疊高度引導程序4？

我正在嘗試使用bootstrap製作一個全寬度爲& fullheight菜單的網站。如何更改導航欄摺疊高度引導程序4？

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="true" aria-label="Toggle navigation"> 
    <span class="navbar-toggler-icon"></span> 
</button> 
<div class="navbar-collapse collapse"> 
    <ul class="navbar-nav"> 
     <li class="nav-item"><a title="Home" href="#" class="nav-link">Home</a></li> 
     <li class="nav-item"><a title="Home" href="#" class="nav-link">Home</a></li> 
     <li class="nav-item"><a title="Home" href="#" class="nav-link">Home</a></li> 
    </ul> 
</div>

當我點擊導航欄，toggler導航欄崩瓦解成爲collapse.show並簡要我看到了風格=「高度：160像素」，而它已經不見了。

我該如何使導航欄摺疊collapse.show變成全高？

任何指針將不勝感激。

來源

2017-09-26 Sariyanta Made

您是否嘗試覆蓋自定義CSS中.collapse.show規則的高度：100vh？ –

我做了，但結果是菜單動畫兩次。第一個動畫直到160px，然後第二個動畫填滿整個屏幕。我試圖讓它只有一個動畫。 –

這可能是因爲引導程序的javascript方法綁定到導航欄.collapse。（完全由我自己測試）你擁有的最好機會可能不是使用bootstrap的腳本，併爲此創建自己的腳本。 –

如果我理解正確的話，那麼我相信你可以通過把另一個div的，navba崩潰專區內實現這一目標和目標，當屏幕小，以增加它的高度：

<div class="navbar-collapse collapse"> 
    <dvi class="adjust-height"> 
    <ul class="navbar-nav"> 
     <li class="nav-item"><a title="Home" href="#" class="nav-link">Home</a></li> 
     <li class="nav-item"><a title="Home" href="#" class="nav-link">Home</a></li> 
     <li class="nav-item"><a title="Home" href="#" class="nav-link">Home</a></li> 
    </ul> 
    <div> 
<div>

調整高度的類「調整高度」到你想要的。

來源

2017-09-26 18:00:47 Laiman

如何更改導航欄摺疊高度引導程序4？

回答

相關問題