html - Bootstrap 2.3.2 响应式导航栏不覆盖内容

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 只是为了提供不同的外观和感觉。这是相关的 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 中的词缀插件将是您的菜单/导航栏的完美处理程序。它会根据屏幕大小响应地折叠和展开菜单。因此，您不必担心管理用于展开和折叠菜单的 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
}