Bootstrap 4导航栏切换器不会显示[重复]

Question

我最近在我的 html 上添加了我的切换按钮（汉堡图标）代码，但是由于某种原因，当我调整屏幕大小和在较小的视口上时，汉堡不会显示并且看起来是空白的。

她是我的 html：

<nav class="navbar navbar-expand-lg">
    <a class="navbar-brand" href="#">Friday Hero</a>
    <button class="navbar-toggler navbar-ligh" type="button" data-toggle="collapse" data-target="#main-nav" aria-controls="main-nav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="main-nav">
      <ul class="nav navbar-nav ml-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">ABOUT <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">CONTACT</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">ADVERTISE</a>
        </li>
        <li class="nav-item">
            <a class="nav-link login" href="#">LOGIN</a>
          </li>
      </ul>

    </div>
  </nav>

我尝试自定义颜色 css，认为这可能是问题，但由于某种原因，图标仍然不会显示。知道如何解决这个问题吗？

Answer 1

有一个小错字：

button class="navbar-toggler navbar-ligh" type="button" data-toggle="collapse" data-target="#main-nav" aria-controls="main-nav" aria-expanded="false" aria-label="Toggle navigation

应该是：

button class="navbar-toggler navbar-light" type="button" data-toggle="collapse" data-target="#main-nav" aria-controls="main-nav" aria-expanded="false" aria-label="Toggle navigation"

在导航栏灯中缺少一个“t”

Answer 2

您在<button class="navbar-toggler navbar-ligh" ... \> 中有错字，必须是navbar-light

Answer 3

您可以通过将navbar-default 类添加到您的代码来更改颜色，并通过编辑navbar-default 类的css 属性更改为您想要的颜色。将以下类添加到 button 标记。

<button class="navbar navbar-toggler navbar-light navbar-default" role="navigation"></button>

并将剩余的 CSS 代码推送到您的 Css 文件中。

.navbar-default {
    background-color: #F8F8F8;
    border-color: #E7E7E7;
}