Question

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

我正在使用如下的简单导航栏：

<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

试试这个：我刚添加了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 STYLE

/* 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/

Answer 2

您缺少导航元素中的颜色主题（navbar-light）：

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

Fiddle here

Answer 3

在响应模式下，Toggler图标未显示，因为此图标类具有一些依赖性。如果您更改此类代码，则会显示：

<nav class="navbar navbar-light">

navbar-toggler-icon 类有父类。所以，你应该添加父类 navbar-light，navbar-dark

Bootstrap 4导航栏不显示Toggler

3 个答案: