html - Bootstrap - 以 992px 显示移动菜单

Question

目前我的导航栏只在较小的设备上显示移动菜单。我希望它在视口(viewport)小于 992px 时显示。

这是我的导航栏的 fiddle :http://jsfiddle.net/nickmadd/DTcHh/574/

如您所见，实际上有两个导航栏，因为我无法让桌面版本以我想要的方式进行响应。

那么，当视口(viewport)达到 992px 时，我怎样才能让“迷你导航”显示一个选项卡式移动版本，就像它被缩小时那样？

这是我的移动导航栏 html:

<div class="navbar navbar-default nav-links navbar-fixed-top hidden-md hidden-lg">
  <div class="container">
    <button class="visible-sm visible-xs navbar-toggle" data-target="#i-want-this-to-collapse" data-toggle="collapse" type="button"> <span class="icon-bar"></span>  <span class="icon-bar"></span>  <span class="icon-bar"></span> 
    </button>
      <a class="mini-navbar navbar-brand" href="/">
        <img src="media/img/nav-logo.png" alt="Driven Car Sales Logo" class="img-rounded logo-nav mini-navbar" />
      </a>
    <ul class="nav navbar-nav">
      <li><a href="#">Used Cars</a>
      </li>
      <li><a href="#">Get Finance</a>
      </li>
      <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">About Driven<strong class="caret"></strong></a>
        <ul class="dropdown-menu">
          <li> <a href "#">The Team</a>
          </li>
          <li> <a href "#">Our Partners</a>
          </li>
        </ul>
      </li>
      <li><a href="#">How To Find Us</a>
      </li>
      <li><a href="#">Contact Us</a>
      </li>
    </ul>
  </div>
</div>

如有任何提示，我们将不胜感激!

Answer 1

如果您使用较少，请自定义 @grid-float-breakpoint。如果你不是，你可以使用 Customize页面以修改值并生成自定义 css 文件。要在 992px 断点处折叠，请将值更改为:@screen-md-min。

自定义页面:

或者，您可以创建自己的媒体查询。