Question

我正在使用Thymeleaf布局，该布局应使用以下默认片段：

fragments/default.html

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

<head th:include="fragments/common :: commonFragment" lang="en"></head>
<body>
<section id="header" th:replace="fragments/header :: headerFragment"></section>
<section th:id="defaultFragment" th:fragment="defaultFragment">
    <div layout:fragment="content"></div>
</section>
</body>
</html>

标头片段由以下html文件定义：

fragments/header.html

<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">

<head th:include="fragments/common :: commonFragment" lang="en">
    <title >Title</title>
</head>
<body>
<div th:id="headerFragment" th:fragment="headerFragment" >
    <div class="navbar navbar-fixed-top" >
        <div class="row text-center top-buffer-small bg-white">
            <a href="index" th:href="@{/}"><img width="310" th:src="@{/images/company_logo.png}"/></a>
        </div>
    </div>

    <div class="row text-center nav-box bg-dark-blue row-fluid">
        <div class="col-xs-1"></div>
        <div class="col-xs-10">
            <div class="row top-buffer-small bottom-buffer-small">
                <div class="col-sm-3">
                    <a class="banner-link" href="#" th:href="@{/reports/dashboard}"
                       >DASHBOARD</a>
                </div>
                <div class="col-sm-3">
                    <a class="banner-link" href="#" th:href="@{/admin/home}"
                       >ADMIN</a>
                </div>
                <div class="col-sm-3">
                    <a class="banner-link" th:href="@{/help/about}"
                       >HELP</a>
                </div>
                <div class="col-sm-3">
                    <a class="banner-link" th:href="@{/logout}"
                       >LOGOUT</a>
                </div>
            </div>
        </div>
        <div class="col-xs-1"></div>
    </div>
</div>
</body>
</html>

登录页面，登录后是：

index.html

<!DOCTYPE html>
<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      xmlns:th="http://www.w3.org/1999/xhtml"
      layout:decorator="fragments/default">
<head lang="en">
    <title>Home</title>
</head>
<body>
<div layout:fragment="content">
    <div class="row bg-medium">
        <h1 class="top-buffer-small"><<system-name>></h1>
        <p class="top-buffer-tiny">Lorem ipsum dolor sit amet,
            consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
            minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        <h3>Juridictions</h3>
        <ul>
            <li><a href="#" th:href="<forwarding-link>">Jurisdiction A</a></li>
            <li>..</li>
        </ul>
    </div>
</div>
</body>
</html>

我遇到的问题是左边的一切都是合理的，而它应该服从div上定义的类。我已经与Thymeleaf合作，足以知道布局正在工作，因为标题存在，但渲染有问题。

我可以访问我在默认和标题片段fragments/common.html的头部包含的文件上定义的所有JavaScript和CSS文件。

我也想象这是一件非常简单的事情，但是我在桌子上敲了一会儿。我在这里看不到什么？

Answer 1

我忘了将bootstrap CSS加载到common.html模板...

所需要的只是：

    <!--bootstrap -->
    <link rel="stylesheet" th:href="@{/css/bootstrap-3.3.7.min.css}"/>

真的！

Thymeleaf - 使用多个片段的布局div类的正确顺序是什么？

1 个答案: