Bootstrap 4 搜索导航栏未显示在移动设备上

如何解决Bootstrap 4 搜索导航栏未显示在移动设备上

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

我查看了这里的答案，并尝试使用 .navbar-header 并将链接封装在 .collapse 类中，但没有用，它只是将所有内容都放在一个新行上，并且搜索栏直接穿过屏幕而不是适合页面 -> https://stackoverflow.com/questions/40445515/navbar-not-visible-in-mobile-display/40445579#:~:text=1%20Answer&text=Your%20entire%20navbar%20is%20wrapped,and%20logo%20should%20be%20placed。

            <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 并且一直穿过屏幕，然后变为可滚动 - 请参阅下面的附加照片：

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

解决方法

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

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

data-target="#searchNavbar"