html - 折叠的 Bootstrap 导航栏不显示

Question

所以当折叠时，我的导航栏菜单按钮有效，但在快速加载动画之后，菜单消失了。不知道为什么会这样，我搜索了其他问题和 Bootstrap 文档，无法弄清楚。网址是http://philipeckert.com

HTML:

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false"> 
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#brand">Eckert</a>
    </div>
    <div class="collapse navbar-collapse" id="navbar">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#gohereforabout">About</a></li>
        <li><a href="#Portfolio">Portfolio</a></li>
        <li><a href="#Contact">Contact</a></li>
      </ul>
    </div>
  </div>
</nav>

CSS:

.navbar-default {
  background-color: rgb(0, 32, 128);
  border-color: #000000;
}

.navbar-default .navbar-brand {
  color: white;
}

.navbar-default .navbar-toggle .icon-bar {
  background-color: white;
}

.nav.navbar-nav.navbar-right li a {
  color: white;
  font-family: 'Ubuntu', sans-serif;
}

@media (max-width: 990px) {
    .navbar-header {
        float: none;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin: 7.5px -15px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
}

Answer 1

只需从您的@media 查询中删除 .navbar-collapse.collapse css:

/*Remove this */
.navbar-collapse.collapse {
        display: none!important;
}

这是 fiddle 演示:https://jsfiddle.net/2pua65co/