时间戳

首页 > 解决方案 > 引导页眉和页脚未在移动设备上显示链接

html - 引导页眉和页脚未在移动设备上显示链接

问题描述

标题

            <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>

使用引导程序 4。

页眉和页脚链接不会显示在移动设备上，但在笔记本电脑/台式机上可以正常工作。

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

标签： htmlcssbootstrap-4thymeleaffooter

解决方案

您的数据目标未正确设置为标题，您将其设置为错误的元素。

这条线

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

推荐阅读