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類的正確順序是什麼？

回答

相關問題