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,being%20hidden ％20in％20mobile％20widths。＆text = navbar％2Dheader％20class％20where％20your和％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按钮，仅在移动设备上，而在台式机上则显示在搜索栏的一侧，即在上面的黑线下方照片和“切换”按钮上方？