使 Bootstrap 导航置顶

Question

我正在制作一个带有 Bootstrap 和导航栏的网站，但使用 class sticky-top 似乎没有任何作用。

这是导航代码：

<div class="row">
  <div class="col-md-12">
    <ul class="nav justify-content-center sticky-top">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
    </ul>
  </div>
</div>

希望有人能帮忙！

Answer 1

你需要把 sticky-top 放到你的导航栏容器中，如果 row 是导航栏，那么你需要把它放在那里而不是它的子导航栏。

/* For displaying */
body {
  height: 300vh;
  background-image: linear-gradient(to bottom, white, black);
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<!-- You need to move sticky-top to the outer element of navbar, which is here -->
<div class="row sticky-top">
  <div class="col-md-12">
    <ul class="nav justify-content-center">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
    </ul>
  </div>
</div>

使 Bootstrap 导航置顶

Make Bootstrap Nav Sticky Top

html

css

nav

navbar

bootstrap-4