为什么Thymeleaf/bootstrap呈现不一致？
为什么Thymeleaf/bootstrap呈现不一致？
提问于 2018-05-04 15:23:03
我有一个Spring / Thymeleaf应用程序。我注意到在某些情况下，风格渲染并不正确。我终于有一个完全无法解释的案子了。我有两段代码：
@GetMapping(value = "/server-admin"+"/"+"cardtype")
public MyModelAndView adminEditEntityList2(Model model, Locale locale) {return super.adminEditEntityList(model, locale);}
@GetMapping(value = "/server-admin", params = { "cardtype" })
@Override
public MyModelAndView adminEditEntityList(Model model, Locale locale) {return super.adminEditEntityList(model, locale);}生成的html是相同的，我只在这里包含一个副本：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Home</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>
<style>
.row-even {background-color:white;}
.row-odd {background-color:white-smoke;}
</style>
</head>
<body>
<div class="navigation">
<!--
<div><span th:text="@{__${#httpServletRequest.requestURI}__}"></span></div>
<div th:with="value=${T(ws.daley.hollow.Params).params(param)}"><span th:text="${value}"></span></div>
<div><span th:text="${param}"></span></div>
<div th:each="var:${#vars.getVariableNames()}"><span th:text="'--'+${var}+'->'+${#vars.getVariable(var)}"></span></div>
-->
<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?lang=en_US">Login</a></li>
<li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="/login?logout&lang=en_US">Logout</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="/forgetPassword.html?lang=en_US">Reset Password</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/registration.html?lang=en_US">Sign up</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/registration.html?captcha&lang=en_US">Sign up with Captcha</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="(lang=${lang})" onclick="enable2FA()">Enable 2FA</a></li>
<li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="(lang=${lang})" onclick="disable2FA()">Disable 2FA</a></li>
</ul>
</li>
<li class="dropdown" style="float:left;">
<a id="drop2" href="(lang=${lang})" 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_US">English</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="?lang=en_US">Spanish</a></li>
</ul>
</li>
<li class="dropdown" style="float:left;">
<a id="drop3" href="#+'?lang='+${lang}" 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&lang=en_US">Logged On Users</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?userSession&lang=en_US">User List</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?user&lang=en_US">User Accounts</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?role&lang=en_US">Roles</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?privilege&lang=en_US">Privileges</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?card&lang=en_US">Cards</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?cardtype&lang=en_US">Card Types</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?piprocessor&lang=en_US">PiProcessors</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?node&lang=en_US">Nodes</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/server-admin?nodefunction&lang=en_US">Node Functions</a></li>
</ul>
</li>
<li class="dropdown" style="float:left;">
<a id="drop4" href="#+'?lang='+${lang}" role="button" class="dropdown-toggle" data-toggle="dropdown">
<span>Create Room</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-room?room&lang=en_US">Rooms</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/server-room?item&lang=en_US">Items</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/server-room?itemstate&lang=en_US">Item States</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/server-room?objective&lang=en_US">Objectives</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/server-room?person&lang=en_US">Persons</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/server-room?picture&lang=en_US">Pictures</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/server-room?pictureimage&lang=en_US">Picture Images</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/server-room?view&lang=en_US">Views</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="content">
<div>
<div>
<h1>Card Types (Click to Edit)</h1>
<div>
<div>
<div>
<div class="col-md-9">
<a href="/server-admin?lang=en_US&cardtype&edit&name=adhesive"><span>adhesive</span></a>
</div>
</div>
<div>
<div class="col-md-9">
<a href="/server-admin?lang=en_US&cardtype&edit&name=card"><span>card</span></a>
</div>
</div>
<div>
<div class="col-md-9">
<a href="/server-admin?lang=en_US&cardtype&edit&name=fob"><span>fob</span></a>
</div>
</div>
<div>
<div class="col-md-9">
<a href="/server-admin?lang=en_US&cardtype&edit&name=test"><span>test</span></a>
</div>
</div>
</div>
<br/>
<div class="rowW col-md-9">
<div class="col-md-3 btn btn-primary rowW"><a href="/server-admin?lang=en_US&cardtype&new" class="btn-primary">New Card Type</a></div>
</div>
</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">© 2017 - Field Server</span>
</div>
</footer>
</div>
</body>
</html>好的一页：
坏页面：
我早就注意到这种问题了。我从来没有发现过这样明显的情况。我用vim编辑器复制并粘贴了Chrome中的"View Source“中的html，然后使用diff对这两个页面进行比较。他们是一样的。唯一的改变似乎是用于调用的URL。
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-05-04 15:37:14
请注意浏览器中的两个urls：
- localhost:8081/server-admin/cardtype?lang=en_US
- localhost:8081/server-admin?cardtype&lang=en_US
现在，您的css链接：
<link rel="stylesheet" href="css/navbar.css" />
<link rel="stylesheet" href="css/body.css" />
<link rel="stylesheet" href="css/footer.css" />这些都是相对的联系。正因为如此，当您加载页面localhost:8081/server-admin/cardtype?lang=en_US时，它试图将您的css解析到。
- 本地主机:8081/server-admin/css/Navbar.css
- 本地主机:8081/server-admin/css/body.css.css
- 本地主机:8081/server-admin/css/footer.css
但是，当您在页面localhost:8081/server-admin?cardtype&lang=en_US上时，没有第二个/。因此，相对链接(不正确)解析为：
- 本地主机:8081/css/Navbar.css
- 本地主机:8081/css/8081.css
- 本地主机:8081/css/footer.css
通过查看浏览器的“网络”选项卡，可以很容易地诊断出这一点( css文件将显示一堆404)。我认为解决这个问题的最简单的方法就是使用this，就像这样--不管你使用的urls是什么，它都能工作。
<link rel="stylesheet" th:href="@{/css/navbar.css}" />
<link rel="stylesheet" th:href="@{/css/body.css}" />
<link rel="stylesheet" th:href="@{/css/footer.css}" />页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50178289
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号