如何更改导航栏折叠高度引导程序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？

回答

相关问题