你如何改变导航栏折叠高度引导程序4？答案

【问题标题】：How do you change navbar-collapse height bootstrap 4?你如何改变导航栏折叠高度引导程序4？
【发布时间】：2017-09-27 02:00:47
【问题描述】：

我正在尝试使用引导程序制作一个具有全宽和全高菜单的网站。

<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>

当我点击 navbar-toggler 时，navbar-collapse collapse 变成了collapse.show，我短暂地看到了一个 style="height:160px" 并且它消失了。

如何使 navbar-collapse collapse.show 变成全高？

任何指针将不胜感激。

【问题讨论】：

您是否尝试使用高度：100vh 覆盖自定义 CSS 中的 .collapse.show 规则？
我做了，但结果是菜单动画了两次。第一个动画直到 160px，然后第二个动画填满整个屏幕。我试图让它只有一个动画。
这可能是因为引导程序的 javascript 方法绑定到导航栏 .collapse。（只是我自己测试过）你最好的机会可能是不使用引导程序的脚本并为此从头开始创建自己的脚本。
看来这是唯一的办法。谢谢皮埃尔。

标签： jquery html css twitter-bootstrap

【解决方案1】：

如果我理解正确，那么我相信您可以通过在 navba-collapse div 中放置另一个 div 并在屏幕较小时将其作为目标以增加高度：

<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>

将“adjust-height”类的高度调整为您想要的。

【讨论】：