Java 引导的导航栏模板显示不正确的布局_Java_Spring_Spring Mvc_Spring Boot_Bootstrap 4

Java 引导的导航栏模板显示不正确的布局

java spring spring-mvc spring-boot bootstrap-4

Java 引导的导航栏模板显示不正确的布局,java,spring,spring-mvc,spring-boot,bootstrap-4,Java,Spring,Spring Mvc,Spring Boot,Bootstrap 4,我正在完成我的完整课程-e-commerce-course-java-spring-hibernate-and-mysql 我不熟悉网络技术和Spring。在这个应用程序中，我使用getbootstrap.com提供的模板另外，我正在使用Spring boot构建应用程序。问题是顶部导航栏不正常。下面是参考代码 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="u

我正在完成我的完整课程-e-commerce-course-java-spring-hibernate-and-mysql 我不熟悉网络技术和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 &raquo;</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>

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>


org.springframework.boot

另外，在这里找到我对代码的期望。已经试过了，但不知道出了什么问题
您的HTML代码在我的浏览器上几乎可以正常工作。两个小变化：

删除自定义CSS，因为它会在导航栏上添加额外的空间，使导航栏太高
在jumbotron之后添加一个“容器”，如下所示：

...


在建议的更改之后，我在浏览器上看到以下内容：

如果您没有看到正确的导航栏，这可能与：

您正在使用浏览器的缓存文件。在为web开发时，如果某些内容未按预期方式显示，则必须确保清除浏览器的缓存。这特别适用于CSS、JS和图像文件
你没有使用正确的文件。例如，当您尝试使用css目录中的文件时，它们实际上存储在其他地方。我不知道Spring，但在本例中，您的css文件似乎位于静态
目录中。尝试将引用更改为/static/css/bootstrap.min.css

希望这有帮助，请尝试此代码
<nav class="navbar navbar-expand-lg navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggler"
                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="nav-item active"><a class="nav-link" href="#">Home</a></li>
                <li class="nav-item"><a class="nav-link" href="#">About</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
                <li  class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                  <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <a class="dropdown-item" href="#">Something else here</a>
                  </div>
                </li>
            </ul>
            <ul class="navbar-nav ml-auto">
                <li class="active nav-item"><a class="nav-link" href="./">Default <span
                        class="sr-only">(current)</span></a></li>
                <li  class="nav-item"><a class="nav-link" href="../navbar-static-top/">Static top</a></li>
                <li  class="nav-item"><a class="nav-link" href="../navbar-fixed-top/">Fixed top</a></li>
            </ul>
        </div>
        <!--/.nav-collapse -->
    </div>
    <!--/.container-fluid -->
</nav>


切换导航













假设您使用的是最新的引导版本，那么使用Udemy Complete-e-commerce-course-java-spring-hibernate-and-mysql时，我也遇到了同样的问题
我发现firefox有这个错误，
源映射错误：请求失败，状态为404
资源URL:http://localhost:8080/js/bootstrap.min.js
源地图URL:bootstrap.min.js.Map。
通过删除该行
/*# sourceMappingURL=bootstrap.css.map */ in bootstrap.min.css

问题已解决，菜单显示正确。如果错误仍然存在，您可能必须清除浏览器的缓存（CTRL+F5）。
您的css没有指向正确的路径，。/static/css/bootstrap.min.css
可能会导致。。。仍然不工作在开发者工具中检查时，您是否可以在源代码选项卡中看到bootstrap.min.css
？是的，可以看到。但是不确定为什么它不能正确地呈现它。navbar headerclass在做什么？
/*# sourceMappingURL=bootstrap.css.map */ in bootstrap.min.css