Bootstrap 导航栏，全高导航栏折叠但带有奇怪的动画

Question

我设法让包含扩展菜单的 div 覆盖整个视图（100vh）。我注意到很酷的动画，虽然它正在扩展自己，但只工作到 li 内容的结尾（最后一个菜单链接），然后速度增加或只是动画停止工作，导航栏折叠最终到达结尾查看端口，但不是一个很好的方式。

你知道为什么吗？它是引导 javascript 功能吗？你知道如何解决吗？

我复制了这个小提琴中的代码

body {
  padding-top: 53px;
}

.pids-navbar{
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  z-index: 99999;
}

.pids-navbar-toggle .pids-icon-bar {
  display: block;
  width: 16px;
  height: 1px;
  border-radius: 1px;
}

.pids-navbar-toggle {
  margin-top: 14px;
  margin-bottom: 14px;
  margin-right: 0px;
  float: left;
}

.pids-navbar-nav {
  margin: 0px -15px;
  font-weight: lighter;
}

.pids-navbar-collapse {
  border: 0px;
  height: calc(100vh - 60px);
}
.full-height {
  height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>





<nav class="navbar navbar-default navbar-static-top pids-navbar">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle pids-navbar-toggle" data-toggle="collapse" data-target="#pids-bs-navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar pids-icon-bar"></span>
        <span class="icon-bar pids-icon-bar"></span>
        <span class="icon-bar pids-icon-bar"></span>
      </button>
    </div>
    <div class="navbar-collapse collapse pids-navbar-collapse" id="pids-bs-navbar">
      <ul class="nav navbar-nav pids-navbar-nav full-height">
        <li class="active">
          <a href="#">Home 1</a>
        </li>
        <li class="">
          <a href="#">Home 2</a>
        </li>
        <li class="">
          <a href="#">Home 3</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

谢谢！

Answer 1

我遇到了完全相同的问题，对我有用的是将 ul 的高度设置为 100vh，而不是整个导航栏折叠的高度。见代码：

.navbar-collapse ul {
  height: 100vh;
}

注意：我正在使用引导程序 4。