如何防止垂直对齐的内容在Bootstrap 4中重叠导航栏？

Question

我能够垂直对齐我的内容，但是当我通过向上拖动窗口缩小浏览器的垂直空间时，垂直对齐的内容会与导航栏重叠。

我想要的行为是垂直对齐的内容在导航栏处停止。我尝试使用各种Bootstrap 4 CSS类来以不同的方式垂直居中我的内容，但这并没有帮助。

这是一个Codepen来证明这一点：https://codepen.io/mravery/pen/aVvNKx（它假设你包括Bootstrap 4）。

HTML

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">My Branding Here</a>
</nav>

<div class="container h-100 d-flex align-items-center">
  <div class="container">
    <div class="row jumbotron">
      <div class="col">
        <h1 class="display-4">Introduction content here.</h1>
        <p class="lead">Would somebody get this big walking carpet out of my way?</p>
        <hr class="my-3" /> Fugit ducimus nihil magnam quidem aperiam velit. Voluptatem dolorum nihil sit porro consequatur dignissimos et. Ad inventore consectetur temporibus minima perspiciatis fuga nesciunt.
      </div>
    </div>
    <div class="row">
      <div class="col">
        <button type="button " class="btn btn-primary btn-lg">Start Quiz!</button>
      </div>
    </div>
  </div>
</div>

CSS

html, body { height: 100%};

Answer 1

在内/后margin: auto;设置.container div（不仅仅是左/右边距）。

<div class="container h-100 d-flex align-items-center">
  <div class="container" style="margin: auto;">
    ....
  </div>
</div>