在 div 中固定 Bootstrap 导航栏

Question

在Bootstrap文档中，他们能够将.navbar-fixed-top“困住”在他们的.bs-docs-example div内：

<div class="bs-docs-example bs-navbar-top-example">
    <div class="navbar navbar-fixed-top" style="position: absolute;">
        <div class="navbar-inner">
        [...]

但是，如果我在我的测试页面中进行相同的操作，导航栏会“逃离”div并固定在body的顶部，而不是div的顶部。这个技巧是如何实现的？

- einundswanzig

---

你想了解的是 http://twitter.github.com/bootstrap/components.html#navbar 上左侧边栏导航栏的行为吗？ - David Taiaroa

Nop是右侧标题为“固定在顶部”（和“固定在底部”）的示例。它们都有“示例”标签。 - einundswanzig

Answer 1

好的，问题解决了。父元素容器必须有 position: relative，导航栏必须有position: absolute，这样如果你添加.navbar-fixed-top或.navbar-fixed-bottom其中之一，它将相对于父元素而不是整个页面被固定。太好了！

- einundswanzig

---

这对我有用，只是我的div上有溢出，而导航栏不会随着它滚动。你遇到过这个问题吗？ - ScubaSteve

Answer 2

<div class="container-fluid">
    <div class="container">
        <nav class="navbar">...</nav>
    </div>
</div>

那可以与内置的Bootstrap CSS一起使用。

- json4rest