html - 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 */
}