Текст H1 не отображается с bootstrap - PullRequest
Новая
       13

Текст H1 не отображается с bootstrap

2 голосов
/ 01 августа 2020

Что бы я ни делал, мои теги h1 не отображаются. Я использую bootstrap 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>

Поскольку при переполнении стека требуется более подробная информация, я подробно расскажу о своем коде.

Ответы [ 3 ]

0 голосов
/ 01 августа 2020

Привет, , я пробовал ваш код, проверяю элемент inspect и вижу, что ваш h1 находится в задней части навигационной панели, поэтому, если вы хотите, чтобы он был виден, вам нужно добавить этот код в свой CSS: 

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

или как другой парень. Но другой парень сделал это намного лучше, так что вам не нужно накладывать отступы на многие классы. так что просто поместите набивку на тело вот так: 

body {
    padding-top: 88px;
}

Удачи, Надеюсь, я помог. Сообщите мне, помог ли я.

0 голосов
/ 01 августа 2020

Position: fixed выводит элемент из нормального документооборота. Это означает, что ваш 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>
0 голосов
/ 01 августа 2020

В <nav> есть position: fixed;, так что он «поверх» вашего заголовка. Вам нужно «pu sh» <h1> под <nav>.

Попробуйте добавить: 

body {
    padding-top: 88px;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...