css - Bootstrap 4 导航栏不显示 Toggler

Question

我创建了一个 Angular 5 应用程序并通过 index.html 包含了 Bootstrap 4。我制作了一个基本的导航栏组件并尝试将其包含在我的应用程序中。但是在响应模式下，我看不到切换器，它看起来是白色的，但是在检查时我可以看到它，点击它也会显示菜单。为什么显示不正确？

我正在使用如下所示的简单导航栏:

<nav class="navbar navbar-expand-lg shift">
  <a class="navbar-brand" href="#">
    <img src="logo.png" alt="Brand Logo" />
  </a>
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown"
    aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="nav nav-pills ml-auto">
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Exams</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
      </li>
    </ul>
  </div>
</nav>

这是我的 fiddle :jsfiddle

Answer 1

您在导航元素 (navbar-light) 中缺少颜色主题:

<nav class="navbar navbar-expand-lg shift navbar-light">

Fiddle here