Question

我的页面如下：

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml"
        xmlns:th="http://www.thymeleaf.org"
        xmlns:sec="http://www.springframework.org/security/tags"
        xmlns:layout="http://www.ultraq.net/thymeleaf/layout"
        layout:decorate="~{layout}">
        <head>
        </head>
        <body>
            <div layout:fragment="content">
                <div th:with="rowW='row col-md-9',userNameW='col-md-1',deviceIdW='col-md-4',timestampW='col-md-4',reasonW='col-md-2'">
                    <div><span th:text="'function='+${function}"></span></div>
                    <div th:unless="${function} != null and ${function} == 'save'">
                        <div class="col-md-3 btn btn-primary" th:classappend="rowW"><a href="localhost:8080/server-admin/card/new" class="btn-primary">New Card</a></div>
                    </div>
                    <div th:if="${function} != null and ${function} == 'save'">
                        <div class="col-md-3 btn btn-primary" th:classappend="rowW"><a href="localhost:8080/server-admin/card/new" class="btn-primary">New Card</a></div>
                    </div>
                </div>
            </div>
        </body>
    </html>

If function is null, the layout is displayed. If function is card the layout is not displayed:

For function=null:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" />
        <link rel="stylesheet" href="css/navbar.css" />
        <link rel="stylesheet" href="css/body.css" />
        <link rel="stylesheet" href="css/footer.css" />
        <script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <script src="/resources/pwstrength.js"></script>
        <script src='https://www.google.com/recaptcha/api.js'></script>
    </head>
    <body>
        <div class="navigation">

        <div id="navbar-examle" class="navbar navbar-static">
            <div class="navbar-inner">
                <div id="a" class="container" style="width: auto;">
                    <a class="brand" href="#" style="float:left;"><img
                        src="/images/Dadavatar.png"><span>My Project</span></a>
                    <ul id="b" class="nav" role="navigation">
                        <li id="c" class="dropdown" style="float:left;">
                            <a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown"><span>Login</span><b class="caret"></b></a>
                            <ul id="d" class="dropdown-menu" role="menu" aria-labelledby="drop1">
                                <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="/login">Login</a></li>
                                <li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="/login?logout">Logout</a></li>
                                <li role="presentation" class="divider"></li>
                                <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="/forgetPassword.html">Reset Password</a></li>
                                <li role="presentation" class="divider"></li>
                                <li role="presentation"><a role="menuitem" tabindex="-1" href="/registration.html">Sign up</a></li>
                                <li role="presentation"><a role="menuitem" tabindex="-1" href="/registration.html?captcha">Sign up with Captcha</a></li>
                                <li role="presentation" class="divider"></li>
                                <li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="#" onclick="enable2FA()">Enable 2FA</a></li>
                                <li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="#" onclick="disable2FA()">Disable 2FA</a></li>
                            </ul>
                        </li>
                        <li class="dropdown" style="float:left;">
                            <a id="drop2" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">
                                <span>English</span>

                                <b class="caret"></b></a>
                            <ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
                                <li role="presentation"><a role="menuitem" tabindex="-1" href="?lang=en">English</a></li>
                                <li role="presentation"><a role="menuitem" tabindex="-1" href="?lang=es_ES">Spanish</a></li>
                            </ul>
                        </li>

                            <li class="dropdown" style="float:left;">
                                <a id="drop2" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">
                                    <span>Administration</span>
                                    <b class="caret"></b></a>
                                <ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
                                    <li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?loggedlist">Logged On Users</a></li>
                                    <li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?userlist">User List</a></li>
                                <li role="presentation" class="divider"></li>
                                    <li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?useraccount">User Accounts</a></li>
                                    <li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?role">Roles</a></li>
                                    <li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?privilege">Privileges</a></li>
                                <li role="presentation" class="divider"></li>
                                    <li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?card">Cards</a></li>
                                    <li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?cardtype">Card Types</a></li>
                                <li role="presentation" class="divider"></li>
                                    <li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?piprocessor">PiProcessors</a></li>
                                    <li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?node">Nodes</a></li>
                                    <li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?nodefunction">Node Functions</a></li>
                                </ul>
                            </li>

                    </ul>
                </div>
            </div>
        </div>

    </div>










        <div class="content">
            <div>
                <div><span>function=null</span></div>
                <div>
                    <div class="col-md-3 btn btn-primary rowW"><a href="localhost:8080/server-admin/card/new" class="btn-primary">New Card</a></div>
                </div>

            </div>
        </div>
        <br>
        <br />
        <div id="qr">
            <p>
                <span>Scan this Barcode using Google Authenticator app on your phone</span>
                <a href="https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2">Android</a>
                <span>and</span>
                <a href="https://itunes.apple.com/us/app/google-authenticator/id388497605">iPhone</a>
            </p>
        </div>
        <div>
            <footer class="footer">
                <div class="container">
                    <span class="text-muted">&copy; 2017 - Field Server</span>
                </div>
            </footer>
         </div>
    </body>
</html>

对于function = save：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" />
        <link rel="stylesheet" href="css/navbar.css" />
        <link rel="stylesheet" href="css/body.css" />
        <link rel="stylesheet" href="css/footer.css" />
        <script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <script src="/resources/pwstrength.js"></script>
        <script src='https://www.google.com/recaptcha/api.js'></script>
    </head>
    <body>
        <div class="navigation">

        <div id="navbar-examle" class="navbar navbar-static">
            <div class="navbar-inner">
                <div id="a" class="container" style="width: auto;">
                    <a class="brand" href="#" style="float:left;"><img
                        src="/images/Dadavatar.png"><span>My Project</span></a>
                    <ul id="b" class="nav" role="navigation">
                        <li id="c" class="dropdown" style="float:left;">
                            <a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown"><span>Login</span><b class="caret"></b></a>
                            <ul id="d" class="dropdown-menu" role="menu" aria-labelledby="drop1">
                                <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="/login">Login</a></li>
                                <li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="/login?logout">Logout</a></li>
                                <li role="presentation" class="divider"></li>
                                <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="/forgetPassword.html">Reset Password</a></li>
                                <li role="presentation" class="divider"></li>
                                <li role="presentation"><a role="menuitem" tabindex="-1" href="/registration.html">Sign up</a></li>
                                <li role="presentation"><a role="menuitem" tabindex="-1" href="/registration.html?captcha">Sign up with Captcha</a></li>
                                <li role="presentation" class="divider"></li>
                                <li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="#" onclick="enable2FA()">Enable 2FA</a></li>
                                <li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="#" onclick="disable2FA()">Disable 2FA</a></li>
                            </ul>
                        </li>
                        <li class="dropdown" style="float:left;">
                            <a id="drop2" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">
                                <span>English</span>

                                <b class="caret"></b></a>
                            <ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
                                <li role="presentation"><a role="menuitem" tabindex="-1" href="?lang=en">English</a></li>
                                <li role="presentation"><a role="menuitem" tabindex="-1" href="?lang=es_ES">Spanish</a></li>
                            </ul>
                        </li>

                            <li class="dropdown" style="float:left;">
                                <a id="drop2" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">
                                    <span>Administration</span>
                                    <b class="caret"></b></a>
                                <ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
                                    <li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?loggedlist">Logged On Users</a></li>
                                    <li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?userlist">User List</a></li>
                                <li role="presentation" class="divider"></li>
                                    <li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?useraccount">User Accounts</a></li>
                                    <li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?role">Roles</a></li>
                                    <li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?privilege">Privileges</a></li>
                                <li role="presentation" class="divider"></li>
                                    <li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?card">Cards</a></li>
                                    <li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?cardtype">Card Types</a></li>
                                <li role="presentation" class="divider"></li>
                                    <li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?piprocessor">PiProcessors</a></li>
                                    <li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?node">Nodes</a></li>
                                    <li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?nodefunction">Node Functions</a></li>
                                </ul>
                            </li>

                    </ul>
                </div>
            </div>
        </div>

    </div>










        <div class="content">
            <div>
                <div><span>function=save</span></div>

                <div>
                    <div class="col-md-3 btn btn-primary rowW"><a href="localhost:8080/server-admin/card/new" class="btn-primary">New Card</a></div>
                </div>
            </div>
        </div>
        <br>
        <br />
        <div id="qr">
            <p>
                <span>Scan this Barcode using Google Authenticator app on your phone</span>
                <a href="https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2">Android</a>
                <span>and</span>
                <a href="https://itunes.apple.com/us/app/google-authenticator/id388497605">iPhone</a>
            </p>
        </div>
        <div>
            <footer class="footer">
                <div class="container">
                    <span class="text-muted">&copy; 2017 - Field Server</span>
                </div>
            </footer>
         </div>
    </body>
</html>

以下是两个文件的差异输出：

$ diff thymeleaf*
91c91,92
<               <div><span>function=null</span></div>
---
>               <div><span>function=save</span></div>
>
95d95
<
$

实际上看起来问题不是Thymeleaf而是Chrome浏览器。有谁知道如何继续？

我已经尝试了很多东西，但据我所知，实际HTML中的唯一区别是空行。

Answer 1

我使用chrome inspect检查了页面，看起来我的css路径有问题。当url在路径中有额外的元素时，静态文件的相对路径将失败。当然。

为什么我的Thymeleaf模板不使用布局

1 个答案: