:Thymeleaf - 複数のフラグメントを使用するレイアウトのdivクラスの正しい順序は?私は次のデフォルトのフラグメントを使用する必要があります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と一緒に、レイアウトが機能していることを十分に知っていました。ヘッダーは問題のあるレンダリングがあってもそこにあります。
デフォルトおよびヘッダーフラグメントの先頭にあるファイルに定義されているすべてのJavaScriptファイルとCSSファイルにアクセスできます(fragments/common.html
)。
私はこれも非常に簡単なものだと考えていますが、私はこの間、テーブルの頭を叩いています。私はここで何が見えないのですか?