html - 移动设备上的引导导航栏行为

Question

我正在使用 Jekyll 构建一个 Bootstrap 4 站点。我在每个页面上都有一个超大屏幕，用作英雄标题。在我调整到移动视口(viewport)之前，一切都很好。此时，超大屏幕被隐藏在固定标题下方，而不是占据其下方自己的空间。如图所示。

当我取消修复 header 时，流程正常运行。我还没有做任何风格的改变。到目前为止，我所使用的只是 Bootstrap HTMS 和默认样式

如何在保留固定 header 的同时防止这种情况发生？我已经发布了我在 Jekyll 中用于构建页面的 body 和 nav HTML。

真诚地提前感谢任何指点:)

<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在小型设备中，这就是您的内容与小型设备中的标题重叠的原因。

仅供引用 position: fixed应用于导航，因为页面导航上的其他元素不存在，因此您的下一个 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 放置在 Bootstrap 的主 css 之后加载。