Question

在我的应用上，我有一个default.html片段，可以分割所有其他片段。它转录如下：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">

<head th:include="fragments/common :: commonFragment">
<meta charset="UTF-8" />
<link rel="shortcut-icon" th:href="@{/assets/img/favicon.png}" type="image/x-icon" />
<title th:text="#{app.name}"> </title>
</head>
<body>
    <section th:id="defaultFragment" th:fragment="defaultFragment">
        <section id="header" th:replace="fragments/header :: headerFragment"></section>
        <div id="sidebar-and-content" class="main-container container-fluid">
            <div th:replace="fragments/sidebar :: sidebarFragment"></div>
            <div class="page-container">
                <div class="page-content">
                    <div class="page-body" >
                        <div layout:fragment="content"></div>
                    </div>
                </div>
            </div>
            <section th:replace="fragments/footer :: footerFragment"></section>
        </div>
    </section>
</body>
</html>

我注意到标题片段部分与以下部分重叠。如果我注释掉标题部分，则会在页面顶部呈现下一个div（id =＆＃34; sidebar-and-content＆＃34;）。当我取消注释它时（id =＆＃34; header＆＃34;），下一个div也会在页面顶部呈现，而在＆＃39;下面标题。

我该如何解决？

Answer 1

我设法通过恢复到早期版本来解决它......

<body>
    <div th:id="defaultFragment" th:fragment="defaultFragment">
        <div th:replace="fragments/header :: headerFragment"></div>
        <div class="main-container container-fluid">
            <div class="page-container">
                <div th:replace="fragments/sidebar :: sidebarFragment"></div>
                <div class="page-content">
                    <div class="page-body">
                        <div layout:fragment="content"></div>
                    </div>
                </div>
            </div>
        </div>
        <div th:replace="fragments/footer :: footerFragment"></div>
    </div>
</body>

一切都很好，工作正常。

thymeleaf - 如何修复标题片段重叠内容和侧边栏菜单？

1 个答案: