实现Bootstrap导航栏右侧图标：宽屏显示，移动端展开时隐藏

步骤1：给百合图标容器添加自定义类 #

修改HTML中百合图标所在的<div>，添加一个便于识别的类名（比如lily-icon-container）：

<div class="lily-icon-container">
  <img src="https://via.placeholder.com/50" alt="Pfadfinderlilie" height="100" width="82">
</div>

步骤2：添加自定义CSS规则 #

通过媒体查询结合Bootstrap折叠组件的show类，实现移动端展开菜单时隐藏图标：

/* 针对移动端（小于768px），菜单展开时隐藏百合图标 */
@media (max-width: 767.98px) {
  .navbar-collapse.show .lily-icon-container {
    display: none;
  }
}

原理：当屏幕宽度小于md断点（768px）时，导航栏进入折叠状态；点击切换按钮展开菜单后，.navbar-collapse元素会被自动添加show类，此时通过CSS选择器匹配并隐藏图标容器。

额外修正：Bootstrap 5属性兼容问题 #

你的代码中切换按钮使用的是Bootstrap 4的属性（data-toggle/data-target），在Bootstrap 5中需要改为data-bs-toggle/data-bs-target才能正常触发折叠功能：

<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
</button>

完整修改后的代码 #

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<style>
/* 针对移动端，菜单展开时隐藏百合图标 */
@media (max-width: 767.98px) {
  .navbar-collapse.show .lily-icon-container {
    display: none;
  }
}
</style>

<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-danger fs-5">
  <div class="container-fluid">
    <a class="navbar-brand" href="#"><img src="https://via.placeholder.com/50" alt="Gau Franken" height="100" width="82"></a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    
    <div class="collapse navbar-collapse" id="navbarCollapse">
      <ul class="navbar-nav mr-auto mb-2 mb-md-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">
            <h4>Selbstdarstellung</h4>
          </a>
        </li>
        <li class="nav-item ">
          <a class="nav-link" href="gruppen.html">
            <h4>Gruppen</h4>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="links.html">
            <h4>Links</h4>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="kontakt.html">
            <h4>Kontakt</h4>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="impressum.html">
            <h4>Impressum & Datenschutz</h4>
          </a>
        </li>
      </ul>
      <div class="lily-icon-container">
        <img src="https://via.placeholder.com/50" alt="Pfadfinderlilie" height="100" width="82">
      </div>
    </div>

  </div>
</nav>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>

内容的提问来源于stack exchange，提问作者Seb. M.