Bootstrap 5.2.1响应式折叠导航栏：弹出时移除图标仅保留文字

完全可以实现，给你两种简单的方案：

方案一：针对小屏幕（折叠状态）自动隐藏图标 #

利用Bootstrap的响应式断点，当屏幕宽度小于sm（576px）时，自动隐藏图标和换行标签：

添加自定义CSS：

/* 小屏幕下隐藏导航图标和换行 */
@media (max-width: 575.98px) {
  .navbar-nav .nav-link .icon {
    display: none;
  }
  .navbar-nav .nav-link br {
    display: none;
  }
}

修改后的完整代码：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">

<style>
/* 小屏幕下隐藏导航图标和换行 */
@media (max-width: 575.98px) {
  .navbar-nav .nav-link .icon {
    display: none;
  }
  .navbar-nav .nav-link br {
    display: none;
  }
}
</style>

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <a class="navbar-brand" href="#">Logo</a>
  
  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>
  
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav">
      <li class="nav-item">
        <div class="float-end">
          <a href="@Url.Action(&quot;Logout&quot;,&quot;Auth&quot;)" class="nav-link text-dark py-1 px-3" title="Logout">
            <span style="padding-left:5px" class="hqy-logout icon"></span><br /><span>Logout</span>
          </a>
        </div>
      </li>
      <li class="nav-item">
        <div class="float-end">
          <a href="@Url.Action(&quot;Logout&quot;,&quot;Auth&quot;)" class="nav-link text-dark px-4 py-1" title="Home">
            <span class="hqy-home icon px-1"></span><br /><span>Home</span>
          </a>
        </div>
      </li>
    </ul>
  </div>
</nav>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>

方案二：仅在折叠菜单展开时隐藏图标 #

如果希望不管屏幕大小，只要点击切换按钮弹出菜单就隐藏图标，可以通过CSS针对折叠展开状态的类：

/* 折叠菜单展开时隐藏图标和换行 */
.navbar-collapse.show .navbar-nav .nav-link .icon {
  display: none;
}
.navbar-collapse.show .navbar-nav .nav-link br {
  display: none;
}

这个方案的优势是，即使在大屏幕下手动触发折叠菜单展开，图标也会隐藏，适配场景更灵活。

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