Navbar项目在屏幕宽度低于992px时消失

Question

我正在玩bootstrap并使用导航栏，但当屏幕宽度低于992px时，导航栏项目消失，我无法找到原因。

    <nav class="navbar navbar-expand navbar-light bg-light">
      <a class="navbar-brand" href="#">Ariel Art</a>
      <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
        <div class="navbar-nav ml-auto">
          <a class="nav-item nav-link active" href="#">Home</a>
          <a class="nav-item nav-link" href="#">Work</a>
          <a class="nav-item nav-link" href="#">Contact</a>
        </div>
      </div>
    </nav>

这是jsfiddle：https://jsfiddle.net/Sodel/uynj1kcs/

Answer 1

.collapse {
  display: none;
}

...隐藏了你的导航栏。

@media (min-width: 992px) {
  .navbar-expand .navbar-collapse {
    display: flex !important;
  }
}

...是从992px向上显示的内容。

注意： 我不知道这个，因为我知道Bootstrap v4。我刚刚在Chrome中按 Ctrl + Shift + I 并查看了哪些属性适用于元素。