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

Question

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

当我取消修复标题时，流程表现正常。我还没有做任何风格的改变。到目前为止，我正在使用的是 Bootstrap HTMS 和默认样式

如何在保留固定标题的同时防止这种情况发生？我已经发布了我在 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

只需使用移动媒体查询将margin-top 或padding-top 相当于您的固定标题高度应用于您的jumbotron。 Here 是一个指向笔的链接，详细说明了固定的标题行为。

Answer 2

当您使用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，使其在引导程序的主 css 之后加载。