使用thymeleaf时布局显示不完整答案

【问题标题】：The layout is displayed incomplete when using thymelaf使用thymeleaf时布局显示不完整
【发布时间】：2016-10-29 22:52:31
【问题描述】：

我正在尝试使用 thymeleaf 布局创建一个典型的用户面板。

正如您在下面的预期结果图片中看到的那样，布局由标题和左侧菜单组成。从菜单中选择的内容显示在子部分中：

但是，我得到的结果是这个：

这是我的“固定部分”代码，其中标题是“标题”片段，菜单是“菜单”片段：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <title>Thymeleaf Layout</title>
    <link href="bootstrap-3.3.6-dist/css/bootstrap.css" rel="stylesheet"/>
    <link href="font-awesome-4.5.0/css/font-awesome.css" rel="stylesheet"/>
    <link href="panel/css/custom.css" rel="stylesheet"/>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'/>
</head>
<body>

<div id="wrapper">
    <nav class="navbar navbar-default navbar-cls-top " role="navigation" style="margin-bottom: 0" th:fragment="header">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="index.html">UserName</a>
        </div>
        <div style="color: white;
padding: 15px 50px 5px 50px;
float: right;
font-size: 16px;"> Last access : 30 May 2014 &nbsp; <a href="#"
                                                       class="btn btn-danger square-btn-adjust">Logout</a></div>
    </nav>
    <nav class="navbar-default navbar-side" role="navigation" th:fragment="menu">
        <div class="sidebar-collapse">
            <ul class="nav" id="main-menu">
                <li>
                    <a href="#"><i class="fa fa-university fa-2x"></i><label th:text="#{companyBasicData}" style="font-weight: normal"></label><span class="fa arrow"></span></a>
                    <ul class="nav nav-second-level">
                        <li>
                            <a href="#"><label th:text="#{companies}" style="font-weight: normal"/></a>
                        </li>
                        <li>
                            <a href="#"><label th:text="#{employees}" style="font-weight: normal"/></a>
                        </li>
                    </ul>
                </li>

                <li>
                    <a href="/billing"><i class="fa fa-balance-scale fa-2x"></i> <label th:text="#{billing}" style="font-weight: normal"/></a>
                </li>
                <li>
                    <a href="#"><i class="fa fa-money  fa-2x"></i><label th:text="#{payrolls}" style="font-weight: normal"/></a>
                </li>
            </ul>
        </div>
    </nav>
</div>
<script src="panel/js/jquery-1.10.2.js"></script>
<script src="bootstrap-3.3.6-dist/js/bootstrap.min.js"></script>
<script src="panel/js/custom.js"></script>

</body>
</html>

这是我的“子”页面，我在其中导入了标题和菜单片段：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <title>Thymeleaf Layout</title>
    <link href="bootstrap-3.3.6-dist/css/bootstrap.css" rel="stylesheet"/>
    <link href="font-awesome-4.5.0/css/font-awesome.css" rel="stylesheet"/>
    <link href="panel/css/custom.css" rel="stylesheet"/>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'/>
</head>
<body onload="test()">
<div th:replace="fragments/panel :: header">
</div>
<div th:replace="fragments/panel :: menu">
</div>

<div>
    my page content
</div>


<script>
    function test() {
        alert("TEST");
    }
</script>
<script src="panel/js/jquery-1.10.2.js"></script>
<script src="bootstrap-3.3.6-dist/js/bootstrap.min.js"></script>
<script src="panel/js/custom.js"></script>
</body>
</html>

您可以在此链接中找到包含示例代码的 gitHub 存储库： https://github.com/MichaelKnight/thymeleafLayout

【问题讨论】：

标签： html spring-mvc spring-boot thymeleaf

【解决方案1】：

Bootstrap Dashboard

这个 Bootstrap Dashboard 示例展示了如何实现一个三组件页面。

顶部导航栏
侧边栏导航菜单
内容区

顶部导航栏是<body> 中的根组件。侧边栏和内容区域是位于<div class="row"> 行内的<div class="col-xs-*"> 列，该行位于<div class="container-fluid"> 容器中。

访问上面的链接并查看源代码以查看 HTML 的结构。从根本上说，这是一个 CSS 问题，因为您当前的 GitHub 项目包含所有元素，它们只是相互放置在视线之外。添加适当的 Bootstrap 类将解决问题。

Thymeleaf 片段已正确包含。

【讨论】：

我今天将尝试这种方法。但是，我期待一个与 ASP.NET 类似的解决方案，您可以在其中创建仪表板的不同部分并将它们嵌入到布局中。
@MichaelKnight 你仍然可以这样做。您只需要使用正确的包装标签和类，以便布局结构正确。无论如何，你可以继续使用 Thymeleaf Fragments。
很高兴知道我能做到。关键是，怎么做？我在百里香文档中找不到任何合适的例子

【解决方案2】：

布局示例已上传到我的 gitHub 存储库，您可以在问题描述的末尾找到该存储库。

顶栏：

<div layout:fragment="header">
    <nav class="navbar navbar-default navbar-cls-top " role="navigation" style="margin-bottom: 0" th:fragment="header">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="index.html">UserName</a>
        </div>
        <div style="color: white;
padding: 15px 50px 5px 50px;
float: right;
font-size: 16px;"> Last access : 30 May 2014 &nbsp; <a href="#"
                                                       class="btn btn-danger square-btn-adjust">Logout</a></div>
    </nav>
</div>

侧边菜单：

<div layout:fragment="sidebar">
    <nav class="navbar-default navbar-side" role="navigation">
        <div class="sidebar-collapse">
            <ul class="nav" id="main-menu">

                <li>
                    <a href="#"><i class="fa fa-university fa-2x"></i><label th:text="#{companyBasicData}"
                                                                             style="font-weight: normal"></label><span
                            class="fa arrow"></span></a>
                    <ul class="nav nav-second-level">
                        <li>
                            <a href="#"><label th:text="#{companies}" style="font-weight: normal"/></a>
                        </li>
                        <li>
                            <a href="#"><label th:text="#{employees}" style="font-weight: normal"/></a>
                        </li>

                    </ul>
                </li>

                <li>
                    <a href="/billing"><i class="fa fa-balance-scale fa-2x"></i> <label th:text="#{billing}"
                                                                                        style="font-weight: normal"/></a>
                </li>
                <li>
                    <a href="#"><i class="fa fa-money  fa-2x"></i><label th:text="#{payrolls}"
                                                                         style="font-weight: normal"/></a>
                </li>
            </ul>

        </div>
    </nav>
</div>

然后你要创建布局页面：

<div layout:fragment="sidebar">
    <nav class="navbar-default navbar-side" role="navigation">
        <div class="sidebar-collapse">
            <ul class="nav" id="main-menu">

                <li>
                    <a href="#"><i class="fa fa-university fa-2x"></i><label th:text="#{companyBasicData}"
                                                                             style="font-weight: normal"></label><span
                            class="fa arrow"></span></a>
                    <ul class="nav nav-second-level">
                        <li>
                            <a href="#"><label th:text="#{companies}" style="font-weight: normal"/></a>
                        </li>
                        <li>
                            <a href="#"><label th:text="#{employees}" style="font-weight: normal"/></a>
                        </li>

                    </ul>
                </li>

                <li>
                    <a href="/billing"><i class="fa fa-balance-scale fa-2x"></i> <label th:text="#{billing}"
                                                                                        style="font-weight: normal"/></a>
                </li>
                <li>
                    <a href="#"><i class="fa fa-money  fa-2x"></i><label th:text="#{payrolls}"
                                                                         style="font-weight: normal"/></a>
                </li>
            </ul>

        </div>
    </nav>
</div>

【讨论】：