点击Navbar Toggle按钮时按钮内文本不显示的问题求助

你的问题根源是Bootstrap默认的<span class="navbar-toggler-icon"></span>——这个元素是用背景图片实现的汉堡菜单图标，它会占据按钮内部的可用空间，导致你添加的文本被覆盖或者无法正常显示。

下面给你两种解决思路：

方案1：替换汉堡图标为自定义文本 #

直接移除带navbar-toggler-icon的span标签，把需要的文本放在按钮内部即可：

<nav class="navbar navbar-expand-lg navbar-dark">
      <a class="navbar-brand" href="">TinDog</a>
       <button class="navbar-toggler" role="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      菜单 <!-- 这里替换成你需要的文本 -->
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto">
          <li class="nav-item">
              <a class="nav-link" href="">Contact</a>
          </li>
          <li class="nav-item">
              <a class="nav-link" href="">Pricing</a>
          </li>
          <li class="nav-item">
              <a class="nav-link" href="">Download</a>
          </li>
      </ul>
   </div>
  </nav>

如果文本和按钮背景颜色冲突，可自定义颜色确保可见：

.navbar-toggler {
    color: #fff; /* 根据你的导航栏背景调整颜色 */
}

方案2：同时保留汉堡图标和文本 #

给按钮添加Bootstrap的弹性布局类，让图标和文本并排显示且不互相覆盖：

<nav class="navbar navbar-expand-lg navbar-dark">
      <a class="navbar-brand" href="">TinDog</a>
       <button class="navbar-toggler d-flex align-items-center gap-2" role="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
      菜单 <!-- 自定义文本 -->
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto">
          <li class="nav-item">
              <a class="nav-link" href="">Contact</a>
          </li>
          <li class="nav-item">
              <a class="nav-link" href="">Pricing</a>
          </li>
          <li class="nav-item">
              <a class="nav-link" href="">Download</a>
          </li>
      </ul>
   </div>
  </nav>

d-flex align-items-center gap-2这几个类会让按钮内部元素变成弹性布局，垂直居中并保持间距，避免图标和文本重叠。

内容的提问来源于stack exchange，提问作者codingwithanichie