Je travaille sur une mise en page thymeleaf qui devrait utiliser le fragment par défaut suivant:Thymeleaf - quel est l'ordre correct des classes div pour la mise en page en utilisant plusieurs fragments?
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>
Le fragment d'en-tête est défini par le fichier html suivant:
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>
Et la page d'atterrissage, après la connexion est:
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>
Le problème que je rencontre ici est tout à nous justifie la gauche alors qu'il doit obéir aux classes définies sur les divs. J'ai suffisamment travaillé avec Thymeleaf pour savoir que la mise en page fonctionne, car l'en-tête est là, mais avec un rendu problématique.
Et je peux accéder à tous les fichiers JavaScript et CSS définis sur le fichier que je joins à la tête des fragments par défaut et en-tête, fragments/common.html.
J'imagine aussi que c'est quelque chose de très simple à faire, mais je me tape la tête sur la table depuis un moment. Qu'est-ce que je ne vois pas ici?