Question

我正在尝试制作一个全宽和高分辨率的网站使用bootstrap的全高度菜单。

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

当我点击导航栏切换器时，导航栏折叠折叠变为collapse.show并简要地看到一个style =“height：160px”并且它已经消失了。

如何让navbar-collapse collapse.show变为全高？

任何指针都会非常感激。

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

调整班级的高度＆＃34; 调整高度＆＃34;你想要什么。

你如何改变导航栏折叠高度bootstrap 4？

1 个答案: