我正在处理应该使用以下默认片段的 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 片段 fragments/common.html 头部的文件中定义的所有 JavaScript 和 CSS 文件。
我还认为这很容易解决，但我为此苦苦思索了一会儿。我在这里没有看到什么？
最佳答案
我忘记将 bootstrap CSS 加载到 common.html 模板中...
只需要:
<!--bootstrap -->
<link rel="stylesheet" th:href="@{/css/bootstrap-3.3.7.min.css}"/>
真的!
关于html - Thymeleaf - 使用多个片段进行布局的 div 类的正确顺序是什么？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46194321/