Bootstrap 5.0汉堡菜单图标不显示[重复]答案

【问题标题】：Bootstrap 5.0 Hamburger menu icon doesn't show up [duplicate]Bootstrap 5.0汉堡菜单图标不显示[重复]
【发布时间】：2021-04-29 20:34:04
【问题描述】：

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

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

【问题讨论】：

标签： css bootstrap-5

【解决方案1】：

你在这里缺课navbar-light

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

应该是

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

这是_navbar.scss中的Bootstrap类定义

.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>

更新

你在哪里找到 _navbar.scss，你怎么知道去那里看的？

我使用 Chorme 开发工具找到了它。下图解释了我如何找到丢失的类以及提到该类的文件名。该文件可以在Bootstrap Github source 中访问。背景图片提到here

...不会想到 navbar-light 会控制任何东西导航栏的配色方案，更不用说是否出现图标在里面的某个地方

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

【讨论】：

谢谢你 - 做到了。我是新手，非常感谢您的帮助！
如果你不介意我问，你在哪里找到_navbar.scss，你怎么知道去那里看？我查看了 OP 中链接的文档，并没有想到 navbar-light 会控制除了导航栏的配色方案之外的任何东西，更不用说图标是否出现在其中的某处。
@CharlesYu 我已经更新了答案，请检查是否有用。