Question

我正在使用Spring MVC和Thymeleaf开发一个Web应用程序作为模板技术。我无法理解如何为图像设置规则，可能在外部CSS文件中。

我知道以下代码有效：

page.html中

<a class="navbar-brand" href="#">
  <img src="../resources/images/logo.png" class="img-responsive" />           
</a>

的style.css

.navbar-brand > img {
    max-height: 100%;
}

h1 { text-align:center; }

但在这种情况下，因为我使用的是Thymeleaf，我的html如下：

thymeleaf.html

[Boostrap navbar...]
<a class="navbar-brand" href="#">
  <img th:src="@{/resources/images/logo.png}" class="img-responsive" />            
</a>
[...]
[/Bootstrap navbar]

<h1>Test</h1>

使用相同的CSS，规则不适用于图像，而是我可以看到在h1上设置的规则（测试居中）。

编辑：在Bootstrap导航栏中的内容div上设置的规则不会被解释（点击＆＃34时无法看到它们;检查元素＆＃34;）。其他规则设置为普通div（没有Bootstrap类或其他），可以正确解释。

EDIT2： CSS导入

servlet.xml

中的

<mvc:resources mapping="/resources/**" location="/resources/"/>

thymeleaf.html

<link rel="stylesheet" type="text/css" media="all"  
      href="/resources/css/style.css" th:href="@{/resources/css/style.css}" />

我怎么解决？提前谢谢。

Answer 1

你可以添加：class ie

<a th:class="navbar-brand" href="#">
  <img th:src="@{/resources/images/logo.png}" th:class="img-responsive" />            
</a>

让我知道这是否适合你

在Thymeleaf中为图像设置CSS样式

1 个答案: