6

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

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

这是我开始的JSFiddle 。

4

3 回答 3

10

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

于 2012-08-15T17:57:56.330 回答
5

这很简单，只需给出“navbar-fixed-top”它就会自动覆盖所有其他内容

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

于 2015-06-02T06:58:17.163 回答
0

我结合使用了这两个答案来使其工作。使用 Inspect Element 计算导航栏的高度（除非您知道高度）。使用该数字的上边距设置下一个 div。然后将导航栏设置为 navbar-fixed-top。

于 2015-07-22T15:52:03.367 回答