Bootstrap 4 搜索导航栏在手机上不显示

Question

我有下面的搜索导航栏，链接显示在搜索栏的右侧。这在 PC 上运行良好，但不适用于 android 或 Iphone 设备。

我已经查看了这里的答案并尝试使用 .navbar-header 并将链接封装在 .collapse class 中，但它没有用，它只是将所有内容放在一个新行上并且搜索栏出现就在屏幕对面，不适合页面 -> .

            <th:block sec:authorize="isAuthenticated()">
            <form th:action="@{/logout}" method="POST" th:hidden="true" name="logoutForm">
                <input type="submit" value="logout">
            </form>
            </th:block>
            <nav class="navbar navbar-expand-sm bg-light">
             <div class="navbar-header">
                <div class="collapse navbar-collapse" id="searchNavbar">
                        </div>
                    <form class="form-inline my-2 my-lg-0" th:action="@{/search}" method="GET">
                        <input type="search" id="item-search" name="keyword" size="50" th:value="${keyword}" class"form-control mr-sm-2"
                            placeholder="What are you looking for " required />
                            &nbsp;
                        <input type="submit" value="Search" class="btn btn-outline-success my-2 my-sm-0"/>
                    </form>
                    <ul class="navbar-nav">
                        <th:block sec:authorize="isAuthenticated()">
                        <li class="nav-item">
                            <a class="nav-link" th:href="@{/customer}"> <b>[[${#request.userPrincipal.name}]]</b></a>
                        </li>
                        </th:block>
                        <li class="nav-item">
                            <a class="nav-link" id="cart-link" th:href="@{/cart}">Cart</a>
                        </li>
                        
                        <th:block sec:authorize="isAuthenticated()">
                        <li class="nav-item">
                            <a class="nav-link" href="javascript: document.logoutForm.submit()">Logout</a>
                        </li> 
                        </th:block>
                    </ul>
                </div>
             </div>
            </nav>
        </div>

切换建议似乎有效，但搜索栏不限于 div 并且一直穿过屏幕然后变得可滚动 - 请参见下面的附图：

有没有办法让搜索栏可切换，但链接显示在搜索栏上方而不需要 select navbar-toggle 按钮，只在移动设备上，但在桌面上显示给搜索栏的一侧，即上图中黑线下方和“切换”按钮上方？

Answer 1

您的问题并不清楚您的最终目标是什么，但您缺少的是 .collapse.navbar-collapse 中的任何内容都将在移动设备上隐藏，您需要一个切换机制来显示它了。我刚刚添加了一个带有“切换”文本的 button 和一个 data-target="#searchNavbar" 以确保您的切换在移动设备上有效。

由于显而易见的原因，它看起来不是很“漂亮”。但我认为您可以通过添加适当的布局来解决类.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js" integrity="sha384-LtrjvnR4Twt/qOuYxE721u19sVFLVSA4hf/rRt6PrZTmiPltdZcI7q7PXQBYTKyf" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">


<th:block sec:authorize="isAuthenticated()">
  <form th:action="@{/logout}" method="POST" th:hidden="true" name="logoutForm">
    <input type="submit" value="logout">
  </form>
</th:block>
<nav class="navbar navbar-expand-sm bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#searchNavbar" aria-controls="searchNavbar" aria-expanded="false" aria-label="Toggle navigation">Toggle
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="navbar-header">
    <form class="form-inline my-2 my-lg-0" th:action="@{/search}" method="GET">
      <input type="search" id="item-search" name="keyword" size="50" th:value="${keyword}" class "form-control mr-sm-2" placeholder="What are you looking for " required /> &nbsp;
      <input type="submit" value="Search" class="btn btn-outline-success my-2 my-sm-0" />
    </form>
  </div>
  <div class="collapse navbar-collapse" id="searchNavbar">
    <ul class="navbar-nav">
      <th:block sec:authorize="isAuthenticated()">
        <li class="nav-item">
          <a class="nav-link" th:href="@{/customer}"> <b>[[${#request.userPrincipal.name}]]</b></a>
        </li>
      </th:block>
      <li class="nav-item">
        <a class="nav-link" id="cart-link" th:href="@{/cart}">Cart</a>
      </li>

      <th:block sec:authorize="isAuthenticated()">
        <li class="nav-item">
          <a class="nav-link" href="javascript: document.logoutForm.submit()">Logout</a>
        </li>
      </th:block>
    </ul>
  </div>
</nav>

Bootstrap 4 搜索导航栏在手机上不显示

Bootstrap 4 search navigation bar not displaying on mobile

html

css

searchbar

thymeleaf

bootstrap-4