我正在学习 Udemy Complete-e-commerce-course-java-spring-hibernate-and-mysql 的类(class) 我是 Web 技术和 Spring 的新手。 在此应用程序中，我使用 getbootstrap.com 的模板 我还使用 Spring boot 构建应用程序。 问题是
顶部导航栏未正常显示。
下面是引用代码。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Navbar Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="/css/bootstrap.min.css" rel="stylesheet" />
<!-- Custom styles for this template -->
<link href="/css/style.css" rel="stylesheet" />
</head>
<body>
<!-- <div class="container"> -->
<!-- Static navbar -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed"
data-toggle="collapse" data-target="#navbar" aria-expanded="false"
aria-controls="navbar">
<span class="sr-only">Toggle navigation</span> <span
class="icon-bar"></span> <span class="icon-bar"></span> <span
class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li class="dropdown"><a href="#" class="dropdown-toggle"
data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="./">Default <span
class="sr-only">(current)</span></a></li>
<li><a href="../navbar-static-top/">Static top</a></li>
<li><a href="../navbar-fixed-top/">Fixed top</a></li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</nav>
<!-- Main component for a primary marketing message or call to action -->
<div class="jumbotron">
<h1>Test of</h1>
<p>This example is a quick exercise to illustrate how the default,
static navbar and fixed to top navbar work. It includes the
responsive CSS and HTML, so it also adapts to your viewport and
device.</p>
<p>
<a class="btn btn-lg btn-primary" href="../../components/#navbar"
role="button">View navbar docs »</a>
</p>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
</body>
</html>
还可以找到下面的 CSS 文件 样式.css
body {
padding-top: 20px;
padding-bottom: 20px;
}
.navbar {
margin-bottom: 20px;
padding: 40px 15px;
text-align: center;
}
pom.xml
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
这就是项目结构的样子
另外，在这里找到我期望的代码。尝试了足够多，但不知道出了什么问题。
最佳答案
您的 HTML 代码在我的浏览器上几乎可以正常工作。两个小变化:
- 删除自定义 CSS，该 CSS 会在导航栏上添加额外空间并使其太高。
在大屏幕后面添加一个“容器”，如下所示:
...
完成建议的更改后，我在浏览器上看到的内容如下:
如果您没有看到正确的导航栏，这可能与以下内容有很大关系:
- 您正在使用浏览器的缓存文件。在进行网络开发时，如果某些内容未按您预期的方式显示，您必须确保清理浏览器的缓存。这特别适用于 CSS、JS 和图像文件。
- 您没有使用正确的文件。例如，当您尝试使用 css 目录中的文件时，但它们实际上存储在其他地方。我不了解 Spring，但在这种情况下，您的 css 文件似乎位于
static目录中。尝试更改对/static/css/bootstrap.min.css 的引用
希望这有帮助，
关于java - Bootstrap 的导航栏模板显示不正确的布局，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47115149/