个人中心
gpt4 book ai didi

java - Bootstrap 的导航栏模板显示不正确的布局

转载 作者：行者123 更新时间：2023-11-30 06:26:26 25 4
gpt4 key购买 nike

我正在学习 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 &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 文件样式.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

最佳答案

您的 HTML 代码在我的浏览器上几乎可以正常工作。两个小变化:

  • 删除自定义 CSS，该 CSS 会在导航栏上添加额外空间并使其太高。

  • 在大屏幕后面添加一个“容器”，如下所示:

    ...

完成建议的更改后，我在浏览器上看到的内容如下:

Working Navbar如果您没有看到正确的导航栏，这可能与以下内容有很大关系:

  • 您正在使用浏览器的缓存文件。在进行网络开发时，如果某些内容未按您预期的方式显示，您必须确保清理浏览器的缓存。这特别适用于 CSS、JS 和图像文件。
  • 您没有使用正确的文件。例如，当您尝试使用 css 目录中的文件时，但它们实际上存储在其他地方。我不了解 Spring，但在这种情况下，您的 css 文件似乎位于 static 目录中。尝试更改对 /static/css/bootstrap.min.css
    • 的引用

希望这有帮助，

关于java - Bootstrap 的导航栏模板显示不正确的布局，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47115149/

25 4 0
文章推荐： JavaFX:带有关闭按钮的 HBox
文章推荐： java - 双逗号从 0.0 到 0.000
文章推荐： Java 转换 : can you force a cast to a interface if it's not declared in the to be casted class?
文章推荐： java - 从 java 类返回一个数组
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com