bootstrap 5 navbar 从 navbar-toggler 中排除 navbar-text

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.右侧

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

将包含文本的块移到包含 navbar-collapse 的块之外 class。
将它放在可折叠块之前，以在菜单项在窄屏幕上展开和折叠时保持文本静止不动。
添加 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>

bootstrap 5 navbar 从 navbar-toggler 中排除 navbar-text

bootstrap 5 navbar exclude navbar-text from navbar-toggler

navbar

twitter-bootstrap

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

案例1.右侧

情况2.菜单项之间