Bootstrap Header 和页脚未在移动设备上显示链接

Question

Header

            <div class="col">
                <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
                    <a class="navbar-brand" th:href="@{/}">
                        <img alt="Site Logo" height="50" th:src="@{images/logo8.png}" />
                </a>
                <button class=navbar-toggler type="button" data-toggle="collapse" data-target="#mainNavbar.#search">
                    <span class="navbar-toggler-icon"> </span>
                </button>
                <div class="collatpse navbar-collapse" id="mainNavbar">
                    <ul class="navbar-nav">
                        <!--- dynamic header ends -->   
                        <th:block sec:authorize="!isAuthenticated()">
                        <li class="nav-item">
                            <a class="nav-link" th:href="@{/login}">Login</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" th:href="@{/register}">Register</a>
                        </li>
                        </th:block>
                        <li class="nav-item">
                            <a class="nav-link" th:href="@{/contact}">Contact</a>
                        </li>
                    </ul>
                </div>
            </nav>
            </div>

页脚：

            <div class="col">
            <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-targer="#main" >
                    <span class="navbar-toggler-icon"> </span>
                </button>
                <div class="collapse navbar-collapse" id="mainFooterNavbar">
                    <ul class="navbar-nav">
                        <th:block th:each="footerMenu : ${footerMenuItems}">
                        <li class="nav-item">
                            <a class="nav-link" th:href="@{'/m/' + ${footerMenu.alias}}">[[${footerMenu.name}]] </a>
                        </li>
                        </th:block>
                        <li class="nav-item">
                            <a class="nav-link" th:href="@{/about}">About us</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" th:href="@{/registerCompany}">Register your Business?</a>
                        </li>
                    </ul>
                </div>
            </nav>
            </div>

使用 bootstrap 4.

Header 和页脚链接未在移动设备上显示，但在 laptop/desktop.

上运行正常

如果您查看下图并看到突出显示的（图像中的方形）按钮，页脚上没有任何反应，也没有显示任何链接。链接显示在 header 但再次选择切换没有任何反应。

Answer 1

您没有为 header 正确设置数据目标，您将其设置为错误的元素。

这一行

 <button class=navbar-toggler type="button" data-toggle="collapse" data-target="#mainNavbar.#search">```

should be:
``` <button class=navbar-toggler type="button" data-toggle="collapse" data-target="#mainNavbar">

The footer looks wrong also.  You are toggling on an element id that does not exist.

Bootstrap Header 和页脚未在移动设备上显示链接

Bootstrap Header and Footer not showing links on mobile devices

html

css

bootstrap-4

thymeleaf

footer