Текст h1 «hello world» скрывается за панелью навигации, как я могу это исправить

У меня проблема с бутстрапом.

это мой код `navbar.html`

<nav class = "navbar navbar-expand-md navbar-dark fixed-top bg-dark">
        <a class = "navbar-brand" href = "#">Fixed navbar</a>
        <button class = "navbar-toggler" type = "button" data-toggle = "collapse" data-target = "#navbarCollapse" aria-controls = "navbarCollapse" aria-expanded = "false" aria-label = "Toggle navigation">
        <span class = "navbar-toggler-icon"></span>
        </button>
        <div class = "collapse navbar-collapse" id = "navbarCollapse">
        <ul class = "navbar-nav mr-auto">
            <li class = "nav-item active">
            <a class = "nav-link" href = "#">Home <span class = "sr-only">(current)</span></a>
            </li>
            <li class = "nav-item">
            <a class = "nav-link" href = "#">Link</a>
            </li>
            <li class = "nav-item">
            <a class = "nav-link disabled" href = "#">Disabled</a>
            </li>
        </ul>
        <form class = "form-inline mt-2 mt-md-0">
            <input class = "form-control mr-sm-2" type = "text" placeholder = "Search" aria-label = "Search">
            <button class = "btn btn-outline-success my-2 my-sm-0" type = "submit">Search</button>
        </form>
        </div>
</nav>

это мой код `layout.html`:

<!DOCTYPE html>
<html lang = "tr">
<head>
    <meta charset = "UTF-8">
    <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
    <title>{% block title %}
    {% endblock %}</title>
    <link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity = "sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin = "anonymous">
</head>
<body>
    {% include "includes/navbar.html" %}
    <h1>Hello World</h1>
    {% block context %}
    {% endblock %}
    <script src = "https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity = "sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin = "anonymous"></script>
    <script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity = "sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin = "anonymous"></script>
    <script src = "https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity = "sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin = "anonymous"></script>
    <script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity = "sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin = "anonymous"></script>
    <script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity = "sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin = "anonymous"></script>
</body>
</html>

Текст h1 "hello world" скрывается за панелью навигации, как я могу это исправить примечание: панель навигации должна быть статической на веб-сайте СПАСИБО

просто удали класс fixed-top

— 09.12.2020 23:17

когда я удаляю fixed-top он не будет статичным

— 09.12.2020 23:17

body { padding-top: 90px; } (высота навигационной панели)

— 09.12.2020 23:19

о, это вы имели в виду под static :) Тогда вашему контенту нужен верхний край с высотой панели навигации (чтобы переместить контент ниже панели навигации).

— 09.12.2020 23:19

Обратите внимание, что в CSS position: static полностью противоположно тому, что вы подразумеваете под «статическим» (то есть fixed).

— 09.12.2020 23:24

javascript html css twitter-bootstrap

09.12.2020 23:13

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

116

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

добавьте padding-top в свой основной или раздел или

<div class = "container" id = "nameofsection">

<style>
  #nameofsection {
    padding-top:100px;
  }
</style>

09.12.2020 23:48

Ответ принят как подходящий

я исправил эту проблему, я добавил br после тега body 3 раза

03.01.2021 23:18

Другие вопросы по теме

Добавить круг между двумя вертикальными div в HTML

Почему EJS генерирует пробелы между каждой итерацией цикла forEach?

Как заменить/вставить html-теги в текст в узле?

Почему моя страница прокручивается, когда я изменяю размер в своем браузере?

Элементы списка модели страницы MVC при отправке для использования в методе публикации

Сценарий приложений: как зацикливать диалоговые окна по нажатию двух кнопок?

HTML CSS Выравнивание содержимого строки с диапазоном строк в центре

Как скрыть div после 3 кликов в html

HTML/CSS. Почему не работает a:hover внутри div?

Мой нижний колонтитул не будет оставаться под моим основным содержанием

Текст h1 «hello world» скрывается за панелью навигации, как я могу это исправить

это мой код navbar.html

это мой код layout.html:

Ответы 2

Другие вопросы по теме

Похожие вопросы

это мой код `navbar.html`

это мой код `layout.html`: