如何让Twitter Bootstraps移动导航栏覆盖页面上的内容而不是将其推下？

Question

我正在使用Twitter Bootstrap,并希望修改移动导航栏,以便在展开时,下拉菜单覆盖页面上的内容而不是将其推下.我知道我可能需要使菜单包含<div>绝对定位,增加它的z-index,并<div>相对定位外部,但我似乎无法让它工作.

有关如何做到这一点的任何建议？

这是我开始的JSFiddle.

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

Answer 2

它很简单只需给出"navbar-fixed-top"它会自动覆盖所有其他内容

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