Thymeleaf

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>

header 片段由以下 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 的合作足以让我知道布局是有效的，因为 header 就在那里，尽管渲染有问题。

而且我可以访问我包含在默认和 header 片段 fragments/common.html 开头的文件中定义的所有 JavaScript 和 CSS 文件。 =19=]

我也认为这很容易解决，但我在 table 上苦苦思索了一段时间。我在这里没有看到什么？

Answer 1

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

只需要：

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

真的！

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

Thymeleaf - what is the correct order of div classes for layout using multiple fragments?

html

css

layout

hierarchy

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

Thymeleaf - what is the correct order of div classes for layout using multiple fragments?

html

css

layout

hierarchy

thymeleaf

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