Question

无论我做什么，我的h1标签都不会显示。我正在使用引导程序4。我之前无法添加占位符文本，所以不知道为什么会这样。

body {
    background-color: #363636;
}

.navbar-nav > .nav-item > a {
    color: #FF20E9;
}

.navbar-nav > .nav-item > a:hover {
    color: #A60F97;
    transition: 0.5s;
}

.navbar {
    background-color: #FD9DFF;
}

.dropdown .dropdown-menu {
    transition: .25s;
}

.home-text {
    display: block;
    color: beige;
}

    <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css'>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js'></script>
    <script src='https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js'></script>

    <header>
        <nav class="navbar navbar-expand-sm bg-custom navbar-custom fixed-top">
            
            <a class="navbar-brand text-body" href="index.html">Techqueen</a>
            <button class="navbar-toggler p-4 bg-custom" type="button" data-toggle="collapse" data-target="#Navbarcollapse">
                <img src="images/navbar.png" alt="Navbar Toggler" width="30px">
            </button>
            
            <div class="collapse navbar-collapse" id="Navbarcollapse">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item">
                        <a class="nav-link p-4" href="index.html">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link p-4" href="#">Images</a>
                    </li>
                </ul>
            </div>
        </nav>
    </header>

    <section>
        <div class="home-text">
            <h1>Home</h1>
        </div>
    </section>

由于堆栈溢出需要更多详细信息，因此我将提供有关代码的详细信息。

Answer 1

3723有<nav>，所以它在标题上方。
您需要将position: fixed;下方的<h1>“推入”。

尝试添加：

<nav>

Answer 2

您好，我尝试了您的代码，并检查了inspect元素，发现您的h1位于导航栏的后面，因此如果要查看它，则必须在您的代码中添加此代码CSS：

.home-text {
    padding-top: 88px;
    display: block;
    color: beige !important;
}

或者像另一个家伙那样。但是另一个人的表现要好得多，这样您就不必在许多课程上都使用填充了。所以只要像这样把填充物放在身上：

body {
    padding-top: 88px;
}

祝您好运，我能提供帮助。让我知道我是否有帮助。

Answer 3

位置：固定会使元素脱离正常文档流。这意味着您的h1出现在其下方。通过从导航中删除固定顶部，您可以看到它仍然在那里。我建议使用position：sticky来避免此问题。

body {
    background-color: #363636;
}

.navbar-nav > .nav-item > a {
    color: #FF20E9;
}

.navbar-nav > .nav-item > a:hover {
    color: #A60F97;
    transition: 0.5s;
}

.navbar {
    background-color: #FD9DFF;
}

.dropdown .dropdown-menu {
    transition: .25s;
}

.home-text {
    display: block;
    color: beige;
    
}

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css'>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js'></script>
    <script src='https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js'></script>
    <link rel="stylesheet" href="index.css">
    <title>Home</title>
</head>
<body>
    <header>
        <nav class="navbar navbar-expand-sm bg-custom navbar-custom">
            
            <a class="navbar-brand text-body" href="index.html">Techqueen</a>
            <button class="navbar-toggler p-4 bg-custom" type="button" data-toggle="collapse" data-target="#Navbarcollapse">
                <img src="images/navbar.png" alt="Navbar Toggler" width="30px">
            </button>
            
            <div class="collapse navbar-collapse" id="Navbarcollapse">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item">
                        <a class="nav-link p-4" href="index.html">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link p-4" href="#">Images</a>
                    </li>
                </ul>
            </div>
        </nav>
    </header>

    <section>
        <div class="home-text">
            <h1>Home</h1>
        </div>
    </section>
</body>
</html>

引导程序未显示H1文本

3 个答案: