Question

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

她是我的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"

错过了＆＃34; t＆＃34;在navbar-ligh

Answer 2

navbar-light中有拼写错误，必须为from math import pi phi= phi= [0,pi/4, pi/2,3,pi/4, pi,5,pi/4,3,pi/2,7,pi/4] t = [1,1.25,1.50,1.25,1,0.75,0.5,0.5,0.75] zipped_=[i for i in zip(t,phi)] print(sorted(zipped_)) print(sorted(zipped_,reverse=True))

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;
}

Bootstrap 4 Navbar toggler不会出现

3 个答案: