Bootstrap 2.3.2响应式Navbar不覆盖内容

Question

我在Bootstrap 2.3.2中有一个导航栏，它在桌面上看起来很棒。我正在尝试使用平板电脑和移动设备的响应式导航栏，我遇到了一些问题。我使用的导航栏代码非常标准

<div class="navbar">
  <div class="navbar-inner">
    <div class="container">

      <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>

      <!-- Everything you want hidden at 940px or less, place within here -->
      <div class="nav-collapse collapse">

        <!-- dynamic code builds the menu here -->

      </div>

    </div>
  </div>
</div>

我正在覆盖标准css，只是为了提供一个不同的外观＆amp;感觉。这是相关的CSS。

.navbar {
    font-family: 'Oswald', sans-serif;
    font-size:13px;
    font-weight: 200; 
    margin:10px 0 10px 0;
    height:40px;
}

.navbar-inner, .navbar-inner .container {
    background-color: #004080;
    border-color: #6699cc;
    background-image: none;
}

.navbar .nav > li > a, .navbar .nav > li > a:hover, .navbar .nav > li > a:visited {
    text-shadow: none;
    color:#fff;
}

.navbar .nav li.dropdown>.dropdown-toggle .caret, .navbar .nav li.dropdown>a:hover .caret {
    border-top-color: #fff;
    border-bottom-color: #fff;
}

ul.nav li.dropdown:hover ul.dropdown-menu {
    display: block;
}
a.menu:after, .dropdown-toggle:after {
    content: none;
}

.dropdown-menu a {
    font-size:11px;
}

.dropdown-menu {
    margin-top:-5px !important;
}

我遇到的问题是当您点击按钮折叠平板电脑或手机上的菜单时，导航后面的内容仍然可见。这使得很难看到菜单项。知道如何让菜单不透明或推送内容吗？您可以从我附加的图片中看到它看起来像关闭然后在您单击导航折叠按钮时。

Answer 1

bootstrap中的affix插件将是菜单/导航栏的完美处理程序。它将根据屏幕大小响应地折叠和扩展菜单。因此，您不必担心管理css和javascript以展开和折叠菜单。

<nav class="navbar navbar-default" data-spy="affix" data-offset-top="100">

data-spy属性会将插件添加到您的代码中，data-offset-top属性会在导航栏更改为固定时显示。在上面的示例中，滚动100px后导航栏将固定。当菜单展开或折叠时，插件会将内容向下推或分别拉回到原始位置。

要使菜单不透明并位于页面中所有内容之上，请将以下css添加到导航栏。

.navbar{
  opacity : 1;
  z-index : 10;//a value greater than any other page contents' z-index
}

Answer 2

哇我的失败了。所以问题是我在navbar类中设置了一个高度，所以当菜单扩展时它保持固定的高度。现在删除该高度属性允许菜单向下扩展。对不起该错误，感谢帮助我解决它的朋友。配对编程FTW。