Css Bootstrap 5.0汉堡包菜单图标不'；我没有出现_Css_Bootstrap 5

Css Bootstrap 5.0汉堡包菜单图标不'；我没有出现

css

Css Bootstrap 5.0汉堡包菜单图标不'；我没有出现,css,bootstrap-5,Css,Bootstrap 5,专家们——我正在努力解决我认为应该是一个简单的问题。我正在查看并尝试实现当窗口狭窄时显示的汉堡包菜单（例如电话屏幕）。当我把窗户弄窄时，按钮还是看不见的。当我将鼠标移动到菜单应该位于的位置时，光标变成指针。当我单击它时，按钮的轮廓变为粗体（这样我就可以看到它），下拉菜单显示出来。但是，汉堡包菜单图标仍然不可见。我做错了什么？我觉得我几乎是从文档中一字不差地复制了代码 <html> <head> <link href="https:/

专家们——我正在努力解决我认为应该是一个简单的问题。我正在查看并尝试实现当窗口狭窄时显示的汉堡包菜单（例如电话屏幕）。当我把窗户弄窄时，按钮还是看不见的。当我将鼠标移动到菜单应该位于的位置时，光标变成指针。当我单击它时，按钮的轮廓变为粗体（这样我就可以看到它），下拉菜单显示出来。但是，汉堡包菜单图标仍然不可见。我做错了什么？我觉得我几乎是从文档中一字不差地复制了代码

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


你好，世界

您在这里缺少类

导航栏灯

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

示例


你好，世界

谢谢你-就这样。我是新手，所以我感谢你的帮助！如果你不介意我问的话，你在哪里找到了_navbar.scss，你是怎么知道在那里找的？我查看了OP中链接的文档，没有想到navbar灯光除了控制navbar的颜色方案之外还能控制任何东西，更不用说是否有图标出现在其中了。@CharlesYu我已经更新了答案，请检查这是否有用。

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

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