如何使Twitter Bootstrap的移动导航栏覆盖页面内容而非将其向下推？

Question

我正在使用Twitter Bootstrap，并希望修改移动导航栏，使其展开时下拉菜单覆盖页面内容而不是将其向下推。我知道我可能需要将包含

的菜单绝对定位、增加它的z-index，并将外部

相对定位，但我似乎无法让它起作用。

有什么建议吗？

这里有一个JSFiddle我正在开始使用。

- kf0l

---

你能展示一下你正在使用的代码吗？ - jackwanders

这是我正在使用的代码 - http://jsfiddle.net/QuRsT/ - kf0l

Answer 1

如果您在导航栏中添加类似于navbar-absolute的类：

<div class="navbar navbar-fixed-top navbar-absolute">...</div>

还有几个CSS规则：

@media (max-width: 979px) {
  .navbar-fixed-top.navbar-absolute {
    position: absolute;
    margin: 0;
  }
}

.navbar-absolute + div {
    margin-top: 68px;
}

这应该可以让你开始了。

JSFiddle

- merv

Answer 2

如果您想让导航栏固定在页面的顶部，只需添加"class=navbar-fixed-top"即可，它会自动覆盖所有其他内容。

<nav class="navbar navbar-default navbar-fixed-top">

- cr7 aj7

Answer 3

我结合两个答案的方法来使其工作。使用检查元素确定您的导航栏高度（除非您知道高度）。将下一个 div 的上边距设置为该数字。然后将您的导航栏设置为 navbar-fixed-top。

- Rachel S