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

Question

我正在制作应使用以下默认片段的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进行了足够的合作，以了解布局是否正常工作，因为尽管有问题的渲染，但标题仍然存在。

而且，我可以访问在默认文件和头文件片段fragments/common.html的头中包含的文件中定义的所有JavaScript和CSS文件。

我还认为这很简单，但是我在桌子上敲了一下头。 我在这里没看到什么？

Answer 1

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

它只需要：

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

真！

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

问题描述

1 个解决方案

解决方案1
0 已采纳 2017-09-13 16:25:49

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

问题描述

1 个解决方案

解决方案1 0 已采纳 2017-09-13 16:25:49

解决方案1
0 已采纳 2017-09-13 16:25:49