Bootstrap 不显示 Jumbotron 背景答案

【问题标题】：Jumbotron background doesn't show with BootstrapBootstrap 不显示 Jumbotron 背景
【发布时间】：2017-12-29 19:49:41
【问题描述】：

我在前端使用带有模板引擎 Thymeleaf 的 Bootstrap，但是我似乎无法使用我的内联 CSS 显示背景图像，我在这个 stackoverflow 问题link 中尝试了答案，这是我的代码：

    <!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1"/>
<title>Jumbotron</title>

</head>
<body>
<div th:fragment="jumbotron" >

<div class="jumbotron jumbotron-fluid"  style=" background-image: url('/static/jumbotron1.jpg'); text-align: center; margin-top: 110px;" >
  <h1>Bonjour</h1>
  <p> Application architectural</p>
  <p><a class="btn btn-primary btn-lg" href="#" role="button">Apprendre</a></p>
</div>
</div>

</body>
</html>

这里最重要的一行是：background-image: url('/static/jumbotron1.jpg'); 这是我的文件的排列方式（Jumbotron1.jpg 是图像）：

【问题讨论】：

标签： html css twitter-bootstrap thymeleaf

【解决方案1】：

您可以使用 @{} 语法将静态资源添加到 thymeleaf。

<div th:style="'background:url(' + @{/<path-to-image>} + ');'"></div>

在您的情况下，您必须使用这两个选项进行测试：

<div th:style="'background:url(' + @{/static/jumbotron1.jpg} + '); text-align: center; margin-top: 110px;'"></div>

或：

<div th:style="'background:url(' + @{/jumbotron1.jpg} + '); text-align: center; margin-top: 110px; '"></div>

【讨论】：

如果你只使用 :