Question

我的Bootstrap 4模板遇到问题。

导航栏与我要导航到的容器的一部分重叠（使用href =“＃containername”）。我正在使用固定的导航栏，并且已将主体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类的容器包含以下代码：

.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代码更改为：

@servers(['web' => 'localhost'])
@task('list', ['on' => 'web'])
    ls -l
@endtask

并将content-container类添加到每个容器，结果现在效果更好，但仍与容器重叠。

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

2 个答案: