引导 4 导航栏不显示切换器

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>

这是我的小提琴：jsfiddle

Answer 1

导航元素(导航栏灯(中缺少颜色主题：

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

在这里摆弄

Answer 2

在响应模式下，切换器图标不显示，因为此图标类具有某些依赖项。如果您像这样更改代码，则将显示：

<nav class="navbar navbar-light">

导航栏-切换器-图标类具有父类。 因此，您应该添加父类导航栏-浅色、导航栏-深色

Answer 3

试试这个：我只是添加了bar和一点点css样式

<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">
      <div class="bar1"></div>
      <div class="bar1"></div>
      <div class="bar1"></div>
    </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>

CSS 样式

/* NAVIGATION */
nav ul li {
    display: inline-block;
}
nav ul li a {
    display: block;
    padding: 15px;
    text-decoration: none;
    color: #343b40;
    font-weight: 800;
    text-transform: uppercase;
    margin: 0 10px;
}
nav ul li a,
nav ul li a:after,
nav ul li a:before {
    transition: all .5s;
}
nav ul li a:hover {
    color: white;
}
/* SHIFT */
nav.shift ul li a {
    position:relative;
    z-index: 1;
}
nav.shift ul li a:hover {
    color: white;
}
nav.shift ul li a:after {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    width: 100%;
    height: 1px;
    content: '.';
    color: transparent;
    background: #34caf7;
    visibility: none;
    opacity: 0;
    z-index: -1;
}
nav.shift ul li a:hover:after {
    opacity: 1;
    visibility: visible;
    height: 100%;
}
.navbar-toggler-right{
  background-color:red;
}
.navbar-toggler-icon{
 background-color:white;
  }
  .bar1{
       width: 30px;
    height: 2px;
    background-color: #000;
    margin: 6px 0;
    transition: 0.4s;
    }
  }

根据需要更改颜色和样式！看看这个！https://jsfiddle.net/t4h0w4pw/3/