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

我在应该使用下面的默认片段Thymeleaf布局工作：Thymeleaf - 使用多个碎片进行布局的div类的正确顺序是什么？

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文件。

我也可以想象这是一个非常简单的工作，但我在桌子上撞了我一会儿。我在这里没有看到什么？

来源

2017-09-13 gtludwig

我忘了引导CSS加载到common.html模板...

时采取了：

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

真的！

来源

2017-09-13 16:25:49 gtludwig

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

回答

相关问题