Bootstrap 5 navbar-toggler-icon 没有出现

Question

我在 Rails 7 应用程序中使用 Bootstrap 5。我正在关注 Bootstrap 的仪表板示例 https://getbootstrap.com/docs/5.0/examples/dashboard/，但在我的 Rails 应用程序中，当我缩短浏览器的宽度时，navbar-toggler-icon 不显示（也不起作用）window.

我有一个 CodePen 示例 https://codepen.io/chrisgo-cp/pen/zYPpEPp，它显示了我正在使用的代码，但 navbar-toggler-icon 未显示。

<header class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">
  <a class="navbar-brand col-md-3 col-lg-2 me-0 px-3" href="#">Company name</a>
  <button class="navbar-toggler position-absolute d-md-none collapsed" type="button"
          data-bs-toggle="collapse" data-bs-target="#sidebarMenu"
          aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <input class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search">
  <div class="navbar-nav">
    <div class="nav-item text-nowrap">
      <a class="nav-link px-3" href="#">Sign out</a>
    </div>
  </div>
</header>

<div class="container-fluid">
  <div class="row">
    <nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
      <div class="position-sticky pt-3">
        <ul class="nav flex-column">
          <li class="nav-item">
            <a class="nav-link active" href="#">
              <!-- <span data-feather="home"></span> -->
              Link ?
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">
              <!-- <span data-feather="file"></span> -->
              Link ?
            </a>
          </li>
        </ul>

        <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
          <span>Saved reports</span>
          <a class="link-secondary" href="#" aria-label="Add a new report">
            <!-- <span data-feather="plus-circle"></span> -->
          </a>
        </h6>
        <ul class="nav flex-column mb-2">
          <li class="nav-item">
            <a class="nav-link" href="#">
              <!-- <span data-feather="file-text"></span> -->
              Report 1
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">
              <!-- <span data-feather="file-text"></span> -->
              Report 2
            </a>
          </li>
        </ul>
      </div>
    </nav>

    <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
      <%= yield %>
    </main>

  </div> <!--/ .row -->
</div> <!--/ .container-fluid -->

Answer 1

开始...从 <button> 中删除 position-absolute。

<!DOCTYPE html>
<html lang='en'>

<head>

  <meta charset='UTF-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <title>Document</title>
  <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css' integrity='sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU' crossorigin='anonymous'>
  <script src='https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.min.js' integrity='sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/' crossorigin='anonymous'></script>

</head>

<body>

  <header class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">
    <a class="navbar-brand col-md-3 col-lg-2 me-0 px-3" href="#">Company name</a>
    <button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

    <button class="navbar-toggler d-md-none collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
    <input class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search">
    <div class="navbar-nav">
      <div class="nav-item text-nowrap">
        <a class="nav-link px-3" href="#">Sign out</a>
      </div>
    </div>
  </header>

  <div class="container-fluid">
    <div class="row">
      <nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
        <div class="position-sticky pt-3">
          <ul class="nav flex-column">
            <li class="nav-item">
              <a class="nav-link active" href="#">
                <!-- <span data-feather="home"></span> -->
                Link ?
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">
                <!-- <span data-feather="file"></span> -->
                Link ?
              </a>
            </li>
          </ul>

          <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
            <span>Saved reports</span>
            <a class="link-secondary" href="#" aria-label="Add a new report">
              <!-- <span data-feather="plus-circle"></span> -->
            </a>
          </h6>
          <ul class="nav flex-column mb-2">
            <li class="nav-item">
              <a class="nav-link" href="#">
                <!-- <span data-feather="file-text"></span> -->
                Report 1
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">
                <!-- <span data-feather="file-text"></span> -->
                Report 2
              </a>
            </li>
          </ul>
        </div>
      </nav>

      <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
        <%= yield %>
      </main>

    </div>
    <!--/ .row -->
  </div>
  <!--/ .container-fluid -->

</body>

</html>

Bootstrap 5 navbar-toggler-icon 没有出现

Bootstrap 5 navbar-toggler-icon does not appear

html

bootstrap-5