bootstrap 5 导航栏从导航栏切换器中排除导航栏文本

Question

我的导航栏在大屏幕上看起来像这样：

在较小的屏幕上，navbar-toggler 处于活动状态，仅显示切换器按钮。是否可以从切换器中排除navbar-text？我想始终在较小的屏幕上显示 Kontostand（标记为红色）：

导航栏的代码：

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

<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
            //calculate Kontostand
                echo "<span class='navbar-text'><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, ',', '')."'</input></strong></span>";
                echo "<a class='nav-link' href='logout.php'><span class='fas fa-sign-out-alt'></span> Abmelden</a>";
      ?>
    </div>
</div>      

Answer 1

Bootstrap 5 导航栏中的不可折叠文本

案例1.右侧

如果左侧的所有项目都应折叠，并且右侧的文本应在任何屏幕宽度下保持可见，则：

1. 将带有文本的块移出navbar-collapse 类的块。
2. 将其放在之前可折叠块以保持文本静止，同时菜单项在窄屏幕上展开和折叠。
3. 添加order classes 之一以在宽屏上移动导航栏右侧的文本块。

这是一个基于Bootstrap documentation 代码的工作示例。

https://codepen.io/glebkema/pen/VwWeyxG?editors=1000

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet">

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
  <div class="container-fluid">
    <button class="navbar-toggler" type="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="navbar-text text-white order-lg-last">
      Non-collapsible text
    </div>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto">
        <li class="nav-item">
          <a class="nav-link" href="#">Link 1</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link 2</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link 3</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"></script>

案例2.菜单项之间

如果折叠元素位于文本的任一侧，则您可以在 navbar-collaps 块内部和外部复制带有文本的块，以便在折叠菜单时仅在窄屏幕上显示第二个文本。

https://codepen.io/glebkema/pen/jOwWYKW?editors=1000

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet">

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
  <div class="container-fluid">
    <button class="navbar-toggler" type="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="navbar-text text-white d-lg-none">
      Non-collapsible text
    </div>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto">
        <li class="nav-item">
          <a class="nav-link" href="#">Left 1</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Left 2</a>
        </li>
      </ul>

      <div class="navbar-text text-white me-2 d-none d-lg-block">
        Non-collapsible text
      </div>

      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="#">Right 1</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Right 2</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"></script>