Bootstrap 5导航栏如何将navbar-text排除在navbar-toggler控制外始终显示

解决方案 #

核心逻辑：只有放在带.collapse类的折叠容器内的元素才会被navbar-toggler控制显隐，你只需要把需要始终展示的Kontostand模块移出#mainMenu折叠容器即可。
修改后的完整导航栏代码如下：

<!-- 折叠按钮 -->
<button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#mainMenu" aria-controls="mainMenu" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
</button>

<!-- 移出到折叠容器外的Kontostand模块，始终显示 -->
<span class='navbar-text text-danger ms-auto me-3 d-flex align-items-center'>
    <strong>Aktueller Kontostand: € 
        <input disabled type="text" size="1.5" class='inputKonto' style='border:none transparent; outline:none; background: transparent; font-weight: bold;' id='Kontostand' name='Kontostand' value='<?=number_format((float)$Summe, 2, ',', '')?>'>
    </strong>
</span>

<!-- 折叠容器，内部元素受折叠按钮控制 -->
<div id="mainMenu" class="collapse navbar-collapse">
    <div class="nav navbar-nav">
        <a class="nav-link active" href="willkommen.php"><span class="fas fa-home"></span> Startseite</a>
        <?php
        //Check Session
        echo "<a class='nav-link' href='news.php'><span class='fas fa-file'></span> Neuigkeiten <span class='badge badge-pill badge-danger'>3</span></a>";
        ?>
    </div>
    <div class="nav navbar-nav ms-auto">
        <?php
        echo "<a class='nav-link' href='logout.php'><span class='fas fa-sign-out-alt'></span> Abmelden</a>";
        ?>
    </div>
</div>

改动说明 #

• 给Kontostand模块添加的ms-auto实现自动左推靠右对齐，me-3增加右侧间距避免和折叠按钮贴边，d-flex align-items-center实现垂直居中，和导航栏高度适配
• 新增text-danger类直接实现你需要的红色文字效果，无需额外写自定义样式
• 修正了原代码中aria-controls属性值和折叠容器id不匹配的问题，避免辅助识别异常

修改后无论小屏折叠菜单是否展开，Kontostand模块都会固定显示在导航栏右上角，完全符合你的预期效果。

内容的提问来源于stack exchange，提问作者Kᴀτᴢ