Bootstrap 4 Navbar 在导航时与容器重叠

Question

我的 Bootstrap 4 模板出现问题。

导航栏与我正在导航到的容器的一部分重叠（使用 href="#containername"）。我使用的是固定导航栏，并且我已将 body padding-top 放在样式表中。

网站看起来像： The start point 但是，当您单击任何菜单项时，例如按钮路线图，您将获得： enter image description here 如您所见，导航栏与路线图容器重叠了几个像素。为什么？

导航栏代码：

<!-- Fixed navbar -->
<nav class="navbar navbar-expand-md navbar-light fixed-top navbar-gd bg-white">
  <a class="navbar-brand" href="#">
    <img src="assets/images/logo.png" width="45" height="30" class="d-inline-block align-top" alt="">
  </a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse"
    aria-expanded="false" aria-label="Toggle navigation">

我已将填充添加为：

body {
    padding-top: 5rem;
}

navbar-gd 类包含：

    .navbar-gd {
        height: 80px;
        max-height: 80px;
        -webkit-box-shadow: 0 0 25px 0 rgba(0,0,0,0.1);
        -moz-box-shadow: 0 0 25px 0 rgba(0,0,0,0.1);
        b

ox-shadow: 0 0 25px 0 rgba(0,0,0,0.1);
}

具有容器空间类的容器包含以下代码：

.container-space {
    height: 100%;
    margin-top: 60px;
    margin-bottom: 60px;
}
.content-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 40px 0px 40px 0px;
}

路线图部分：

<div class="container-fluid background-blauw" id="roadmap">
  <div class="content-container">
      <h1 class="header subtext text-center text-white">Onze roadmap voor dit jaar</h1>
    <div class="container">
      <ul class="timeline">
        <li>
          <div class="timeline-badge success">
            <i class="fa fa-calendar"></i>
          </div>
          <div class="timeline-panel">
            <div class="timeline-heading">
              <h5 class="timeline-title">Initiatie project</h5>
              <p>
                <small class="text-muted">
                  <i class="fa fa-clock-o"></i>
                  uitgevoerd op 1 Januari 2018
                  </small>
              </p>
            </div>
            <div class="timeline-body">
              <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
            </div>
          </div>
        </li>
        <li class="timeline-inverted">
            <div class="timeline-badge warning">
              <i class="fa fa-calendar"></i>
            </div>
            <div class="timeline-panel">
              <div class="timeline-heading">
                <h5 class="timeline-title">Beta fase 1</h5>
                <p>
                  <small class="text-muted">
                    <i class="fa fa-clock-o"></i>
                    staat gepland op 1 September</small>
                </p>
              </div>
              <div class="timeline-body">
                <p>In deze fase gaan we het platform met test transacties testen, deze transacties worden binnen het testnet uitgevoerd.</p>
              </div>
            </div>
          </li>
          <li>
              <div class="timeline-badge warning">
                <i class="fa fa-calendar"></i>
              </div>
              <div class="timeline-panel">
                <div class="timeline-heading">
                  <h5 class="timeline-title">Beta fase 2</h5>
                  <p>
                    <small class="text-muted">
                      <i class="fa fa-clock-o"></i> staat gepland op 1 November</small>
                  </p>
                </div>
                <div class="timeline-body">
                  <p>In deze fase gaan we het platform met echte transacties testen, deze transacties worden binnen het mainnet uitgevoerd.</p>
                </div>
              </div>
            </li>
            <li class="timeline-inverted">
                <div class="timeline-badge warning">
                  <i class="fa fa-rocket"></i>
                </div>
                <div class="timeline-panel">
                  <div class="timeline-heading">
                    <h5 class="timeline-title">Lancering platform</h5>
                    <p>
                      <small class="text-muted">
                        <i class="fa fa-clock-o"></i> staat gepland op 1 December</small>
                    </p>
                  </div>
                  <div class="timeline-body">
                    <p>Met de lancering van het platform maken we het voor iedereen mogelijk om snel en veilig Guldens te kopen. De lancering van het platform willen we dan ook groots aanpakken. Alle beta testers zijn welkom op het lanceringsevent!</p>
                  </div>
                </div>
              </li>
      </ul>
    </div>
  </div>
</div>

Answer 1

调整顶部容器的边距不够吗？

.yourTopContainer {
    margin-top: 50px; /* insert your navBar height */
}

Answer 2

我已将 .content-container 代码更改为：

.content-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 100px 0px 100px 0px;
}

并为每个容器添加了 content-container 类，结果现在好多了，但它仍然与容器重叠。