Bootstrap Navbar поведение на мобильном телефоне

Question

Я строю сайт Bootstrap 4, используя Jekyll.У меня есть jumbotron на каждой странице, который работает как заголовок героя.Все прекрасно работает, пока я не изменю размеры в мобильном окне просмотра.В этот момент jumbotron скрывается под фиксированным заголовком, а не занимает свое собственное пространство под ним.Как показано на рисунке.

Когда я освобождаю заголовок, поток работает нормально.Мне еще предстоит внести какие-либо изменения стиля.Пока все, с чем я работаю, это Bootstrap HTMS и стили по умолчанию

Как я могу предотвратить это, сохраняя при этом фиксированный заголовок?Я разместил и тело, и навигационный HTML, который я использую в Jekyll для создания страниц.

Искренне благодарю за любые указатели :)

<header>
<nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light">
  <!--Site logo-->
  <a class="navbar-brand" href="#">Thomas Bishop</a>
    <!--Collapse nav on mobile viewports-->
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
    </button>
      <!--Nav links-->
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav ml-auto">
          <!--Home-->
          <li class="nav-item active">
            <a class="nav-link" href="{{ site.baseurl }}/">Home <span class="sr-only">(current)</span></a>
          </li>
          <!--Services-->
          <li class="nav-item">
            <a class="nav-link" href="{{ site.baseurl }}/services">Services</a>
          </li>
          <!--Expertise-->
          <li class="nav-item">
            <a class="nav-link" href="{{ site.baseurl }}/expertise">Expertise</a>
          </li>
          <!--Blog-->
          <li class="nav-item">
            <a class="nav-link" href="{{ site.baseurl }}/blog">Blog</a>
          </li>
          <!--About-->
          <li class="nav-item">
            <a class="nav-link" href="{{ site.baseurl }}/about">About</a>
          </li>
          <!--Contact-->
          <li class="nav-item">
            <a class="nav-link" href="{{ site.baseurl }}/contact">Contact</a>
          </li>
        </ul>
      </div>
</nav>
</header>

---
layout: default
title: Content Usage Policy
permalink: /content-usage-policy
---
<div class="container-fluid">
  <div class="row">
    <div class="col-12">
  <div class="jumbotron jumbotron-fluid bg-light">
    <h1 class="display-4 d-flex justify-content-center">Content Usage Policy</h1>
    <p class="lead d-flex justify-content-center">Optional sub-heading or meta description</p>
  </div>
</div>
</div>



</div>

Answer 1

Поскольку вы используете класс jumbotron, он обеспечивает padding-top: 4rem на больших устройствах и padding-top: 2rem на небольших устройствах, поэтому ваш контент пересекается с заголовком на маленьких устройствах.

FYI как position: fixedприменяется к nav, поскольку другие элементы на странице nav не существуют, поэтому ваш следующий div также будет начинаться с top: 0.Осмотрите элемент и просмотрите <div class="container-fluid">, вы также можете увидеть, что он начинается с top:0.Чтобы решить эту проблему, сделайте следующее:

body > .container-fluid {
    padding-top: 40px;
}

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

@media (max-width: 576px) {
    body > .container-fluid {
        padding-top: 20px;
    }
} 

И поместите этот css так, чтобы он загружался после основного css начальной загрузки.

Answer 2

Просто примените margin-top или padding-top , эквивалентный вашей фиксированной высоте заголовка , к вашему jumbotron с помощью мобильного медиа-запроса. Здесь - это ссылка на перо с подробным описанием поведения фиксированного заголовка.