Question

我正在从Udemy完成电子商务课程 - java-spring-hibernate-and-mysql 我是Web技术和Spring的新手。在这个应用程序中，我使用getbootstrap.com模板我也使用Spring启动构建应用程序。问题是那个

顶部导航栏未正确显示。

以下是参考代码。

的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>

还可以在下面找到CSS文件的style.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>

这就是项目结构的样子

project structure

另外，在这里找到我期待的代码。试了但不知道出了什么问题。

enter image description here

Answer 1

您的HTML代码在我的浏览器上运行得非常好。两个小变化：

删除自定义CSS，这会在导航栏中添加额外空间并使其太高。
在您的jumbotron之后添加一个“容器”，如下所示：

＆lt; div class =“jumbotron”＆gt; ＆lt; div class =“container”＆gt; ... ＆LT; / DIV＆GT; ＆LT; / DIV＆GT;

建议的更改后，这是我在浏览器上看到的内容：

如果您没有看到正确的Navbar，这可能与以下内容非常相关：

您正在使用浏览器的缓存文件。在开发Web时，如果某些内容没有按照您的意图显示，则必须确保清理浏览器的缓存。这特别适用于CSS，JS和图像文件。
您没有使用正确的文件。例如，当您尝试在css目录中使用文件时，它们实际上存储在其他位置。我不知道Spring，但在这种情况下，你的css文件似乎存在于static目录中。尝试更改您对/static/css/bootstrap.min.css

希望这有帮助，

Answer 2

试试此代码

<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>

假设您使用的是最新的bootstrap版本

Answer 3

使用Udemy Complete-e-commerce-course-java-spring-hibernate-and-mysql，我遇到了同样的问题。

我发现Firefox出现此错误， Source map error: request failed with status 404 Resource URL: http://localhost:8080/js/bootstrap.min.js Source Map URL: bootstrap.min.js.map。通过删除行

/*# sourceMappingURL=bootstrap.css.map */ in bootstrap.min.css

问题已解决，菜单正确显示。如果错误仍然存在，则可能必须清理浏览器的缓存（CTRL + F5）。

Bootstrap的Navbar模板显示不正确的布局

3 个答案: