Bootstrap 5.0 汉堡菜单图标不显示

Question

专家 - 我正在尝试解决我认为应该是一个简单的问题。我正在查看 https://getbootstrap.com/docs/5.0/components/navbar/#toggler 并尝试实现当 window 较窄时显示的汉堡菜单（例如 phone 屏幕）。当我缩小 window 时，按钮仍然不可见。当我将鼠标移动到菜单应该在的位置时，光标变成了指针。当我单击它时，按钮的轮廓变为粗体（这样我就可以看到它），并且会显示下拉菜单。但是，汉堡菜单图标仍然不可见。我究竟做错了什么？我觉得我几乎是从文档中逐字复制代码。

<html>
  <head>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
      crossorigin="anonymous"
    />

    <script
      src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"
      integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js"
      integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj"
      crossorigin="anonymous"
    ></script>
    <title>Hello, world</title>
  </head>
  <body>
    <nav class="navbar navbar-expand-lg bg-light">
      <div class="container-fluid">
        <a class="navbar-brand me-auto" style="margin-left: 20px" href="#"
          >Example Name</a
        >

        <button
          class="navbar-toggler bg-light"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#navbarTogglerDemo02"
          aria-controls="navbarTogglerDemo02"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
          <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
            <li class="nav-item">
              <a class="nav-link active" aria-current="page" href="#"
                >Option 1</a
              >
            </li>
            <li class="nav-item"><a class="nav-link" href="#">Option 2</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Option 3</a></li>
          </ul>
        </div>
      </div>
    </nav>
  </body>
</html>

Answer 1

你缺少 class navbar-light 这里

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

应该是

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

这是Bootstrapclass在_navbar.scss

中的定义

.navbar-light .navbar-toggler-icon {
    background-image: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e);
}

例子

<html>

<head>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous" />

  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
  <title>Hello, world</title>
</head>

<body>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
      <a class="navbar-brand me-auto" style="margin-left: 20px" href="#">Example Name</a
        >

        <button
          class="navbar-toggler bg-light"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#navbarTogglerDemo02"
          aria-controls="navbarTogglerDemo02"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
          <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
            <li class="nav-item">
              <a class="nav-link active" aria-current="page" href="#"
                >Option 1</a
              >
            </li>
            <li class="nav-item"><a class="nav-link" href="#">Option 2</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Option 3</a></li>
      </ul>
    </div>
    </div>
  </nav>
</body>

</html>

更新

where did you find _navbar.scss, and how did you know to look there?

我使用 Chorme 开发工具找到了它。下图解释了我如何找到丢失的 class 以及提到 class 的文件名。该文件可以在 Bootstrap Github source. Background image is mentioned here

中访问

...wouldn't have thought that navbar-light would control anything but the color scheme of the navbar, let alone whether an icon appears somewhere in it

图标取决于导航栏背景以获得更好的可见性。这就是为什么它依赖于 navbar-light

Bootstrap 5.0 汉堡菜单图标不显示

Bootstrap 5.0 Hamburger menu icon doesn't show up

css

bootstrap-5