Spring boot 为什么Thymeleaf/bootstrap渲染不一致？
我有一个springboot/Thymeleaf应用程序。我注意到，在某些情况下，样式渲染不会正常进行。我终于有了一个完全无法解释的案例。我有两段代码：Spring boot 为什么Thymeleaf/bootstrap渲染不一致？,spring-boot,twitter-bootstrap-3,thymeleaf,Spring Boot,Twitter Bootstrap 3,Thymeleaf,我有一个springboot/Thymeleaf应用程序。我注意到，在某些情况下，样式渲染不会正常进行。我终于有了一个完全无法解释的案例。我有两段代码： @GetMapping(value = "/server-admin"+"/"+"cardtype") public MyModelAndView adminEditEntityList2(Model model, Locale locale) {return super.adminEditEntityList(model, locale);}
@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);}
<!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。请注意浏览器中的两个URL： 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" />
哦太近了！你有点误读了我的帖子。我列出了结果html，而不是源html。我已经有了百里香。不幸的是，我使用了th:href=@{css/footer.css}，而不是th:href=@{/css/footer.css}。添加/修复了该问题。
<link rel="stylesheet" th:href="@{/css/navbar.css}" />
<link rel="stylesheet" th:href="@{/css/body.css}" />
<link rel="stylesheet" th:href="@{/css/footer.css}" />