gpt4 book ai didi

html - 如何使用 jumbotron 查看正在运行的应用程序的标题

转载 作者:行者123 更新时间:2023-11-27 23:56:17 26 4
gpt4 key购买 nike

问题是当我运行应用程序并转到 localhost:8080 时,我没有看到我在其中创建的 header ,但是当应用程序未运行时,我想查看网络的外观,我看到了它,所以问题可能出在我的 main.css 的链接。

这是最新的 bootstrap 4.3.1 java 12 spring boot 2.1.5

主页.html

<!DOCTYPE html>
<html lang="en">
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Home page</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
<link href="../static/css/main.css" th:href="@{/css/main.css}" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="jumbotron home-jumbo">
<div class="container text-center text-white jumbo-container">
<h1 class="display-3">Foodie</h1>
<p>Welcome in our restaurant. You can order what You want and how much You want and we will do it for
You.</p>
</div>
</div>
<div th:remove="all-but-first">
<div class="media col-6 offset-3" th:each="item: ${items}">
<i class="fas fa-utensils fa-4x"></i>
<div class="media-body">
<h5 th:text="|${item.name}(${item.price}zł)|">Pizza Margherita (25zł)</h5>
<p th:text="${item.shortDescription}">Short description pizza margherita, delicious classic on thin
crust and melt cheese.</p>
</div>
</div>
<div class="media col-6 offset-3">
<i class="fas fa-utensils fa-4x"></i>
<div class="media-body">
<h5>Pizza Capriciosa (26zł)</h5>
<p>Short description pizza margherita, delicious classic on thin crust and melt cheese.</p>
</div>
</div>
<div class="media col-6 offset-3">
<i class="fas fa-utensils fa-4x"></i>
<div class="media-body">
<h5>Pizza Mafioso (27zł)</h5>
<p>Short description pizza margherita, delicious classic on thin crust and melt cheese.</p>
</div>
</div>
</div>
</div>
</body>
</html>

主.css

.home-jumbo {
background: url("../img/fork.png") center;
}

.media-body {
margin-left: 10px;
}

家庭 Controller

package pl.karol.foodieapp;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import pl.karol.foodieapp.item.Item;
import pl.karol.foodieapp.item.ItemRepository;

import java.util.List;

@Controller
public class HomeController {

private ItemRepository itemRepository;

@Autowired
public HomeController(ItemRepository itemRepository) {
this.itemRepository = itemRepository;
}

@GetMapping("/")
public String home(Model model) {
List<Item> items = itemRepository.findAll();
model.addAttribute("items", items);
return "home";
}
}

我希望是同一个网站,但包括我放在 jumbotron 中的标题。

最佳答案

已解决。在 main.css 中,不要在“地址”中输入图像 url 地址,而是使用“地址”

.home-jumbo {
background: url('../img/fork.png') center;
}

.media-body {
margin-left: 10px;
}

关于html - 如何使用 jumbotron 查看正在运行的应用程序的标题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56250630/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com