Twitter Bootstrap 3中导航栏的绝对定位

Question

在 Bootstrap 中，fixed navbar 并不是使用 position:absolute 来实现的。使用 fixed navbar 时，导航栏下方的标记出现在头部导航栏上。如何解决这个问题：

我尝试使用 position:absolute 和一个 顶部间距等于导航栏头部高度的边距，但都没有效果。你有什么建议吗？

- user3283104

---

请贴上一些代码。 - rpax

你能否为你的代码添加一个 JSFiddle 链接？ - user3222498

你想让导航栏在滚动页面时保持固定在页面顶部吗？ - Galen Gidman

Answer 1

Bootstrap提供了固定在页面顶部的选项。

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container">
    ...
  </div>
</nav>

参考: http://getbootstrap.com/components/#navbar-fixed-top 或者 您可以使用absolute固定在顶部，并将导航栏的高度设置为与正文相同的padding-top，例如：

.navbar{
  height: 50px;
}
body{
  padding-top: 50px;
}

- Mo.

Answer 2

在Bootstrap 4中，使用fixed-top代替navbar-fixed-top：

<nav class="navbar fixed-top navbar-light bg-faded">
  <a class="navbar-brand" href="#">Fixed top</a>
</nav>

- Kohei Mikami