Twitter Bootstrap-导航崩溃

Question

我正在努力更新我的网站，以便使用Twitter Bootstrap做出响应。 我当前的网站可以在http://www.JoshuaBock.com上查看。

我在尝试自定义Navbar折叠功能时遇到问题。 目前，它可以正确显示，但是在981像素和1126像素之间无法正常工作。 我避免修改Bootstrap基本代码，因此可以轻松升级到较新版本的Bootstrap。 该问题是由我的自定义媒体查询引起的：

媒体查询

<pre><code>
@media (min-width: 980px) and (max-width: 1126px) {
      .navbar{
        width: 85%;
      }
      .navbar-fixed-top,
      .navbar-fixed-bottom {
        position: static;
      }
      .navbar-fixed-top {
        margin-bottom: 20px;
      }
      .navbar-fixed-bottom {
        margin-top: 20px;
      }
      .navbar-fixed-top .navbar-inner,
      .navbar-fixed-bottom .navbar-inner {
        padding: 5px;
      }
      .navbar .container {
        width: auto;
        padding: 0;
      }
      .navbar .brand {
        padding-right: 10px;
        padding-left: 10px;
        margin: 0 0 0 -5px;
      }
      .nav-collapse {
        clear: both;
      }
      .nav-collapse .nav {
        float: none;
        margin: 0 0 10px;
      }
      .nav-collapse .nav > li {
        float: none;
      }
      .nav-collapse .nav > li > a {
        margin-bottom: 2px;
      }
      .nav-collapse .nav > .divider-vertical {
        display: none;
      }
      .nav-collapse .nav .nav-header {
        color: #777777;
        text-shadow: none;
      }
      .nav-collapse .nav > li > a,
      .nav-collapse .dropdown-menu a {
        padding: 9px 15px;
        font-weight: bold;
        color: #777777;
        -webkit-border-radius: 3px;
           -moz-border-radius: 3px;
                border-radius: 3px;
      }
      .nav-collapse .btn {
        padding: 4px 10px 4px;
        font-weight: normal;
        -webkit-border-radius: 4px;
           -moz-border-radius: 4px;
                border-radius: 4px;
      }
      .nav-collapse .dropdown-menu li + li a {
        margin-bottom: 2px;
      }
      .nav-collapse .nav > li > a:hover,
      .nav-collapse .dropdown-menu a:hover {
        background-color: #f2f2f2;
      }
      .navbar-inverse .nav-collapse .nav > li > a,
      .navbar-inverse .nav-collapse .dropdown-menu a {
        color: #999999;
      }
      .navbar-inverse .nav-collapse .nav > li > a:hover,
      .navbar-inverse .nav-collapse .dropdown-menu a:hover {
        background-color: #111111;
      }
      .nav-collapse.in .btn-group {
        padding: 0;
        margin-top: 5px;
      }
      .nav-collapse .dropdown-menu {
        position: static;
        top: auto;
        left: auto;
        display: none;
        float: none;
        max-width: none;
        padding: 0;
        margin: 0 15px;
        background-color: transparent;
        border: none;
        -webkit-border-radius: 0;
           -moz-border-radius: 0;
                border-radius: 0;
        -webkit-box-shadow: none;
           -moz-box-shadow: none;
                box-shadow: none;
      }
      .nav-collapse .open > .dropdown-menu {
        display: block;
      }
      .nav-collapse .dropdown-menu:before,
      .nav-collapse .dropdown-menu:after {
        display: none;
      }
      .nav-collapse .dropdown-menu .divider {
        display: none;
      }
      .nav-collapse .nav > li > .dropdown-menu:before,
      .nav-collapse .nav > li > .dropdown-menu:after {
        display: none;
      }
      .nav-collapse .navbar-form,
      .nav-collapse .navbar-search {
        float: none;
        padding: 10px 15px;
        margin: 10px 0;
        border-top: 1px solid #f2f2f2;
        border-bottom: 1px solid #f2f2f2;
        -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
           -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
                box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
      }
      .navbar-inverse .nav-collapse .navbar-form,
      .navbar-inverse .nav-collapse .navbar-search {
        border-top-color: #111111;
        border-bottom-color: #111111;
      }
      .navbar .nav-collapse .nav.pull-right {
        float: none;
        margin-left: 0;
      }
      .nav-collapse,
      .nav-collapse.collapse {
        height: 0;
        overflow: hidden;
      }
      .navbar .btn-navbar {
        display: block;
      }
      .navbar-static .navbar-inner {
        padding-right: 10px;
        padding-left: 10px;
      }
    }

    @media (min-width: 980px) and (max-width: 1126px) {
        .nav-collapse.collapse{
            height:0 !important;
            overflow:hidden !important;
        }
    }

</pre></code>

更多指定!important部分似乎是造成此问题的原因。 如果删除!important则导航不会崩溃。

可以在我的Beta网站@ http://beta.joshuabock.com/index.html上查看实际的代码

我知道我已经接近解决方案，但是可以使用一些帮助来解决此问题。 任何帮助将不胜感激。 提前致谢。

Answer 1

当我指定媒体查询时，通常会像这样指定它们

@media all and (min-width: 980px) and (max-width: 1126px)

注意到您的启动@media，所以不确定是否引起任何问题

Answer 2

这是我解决这个问题的方法

@media (max-width: 1992px) {
    .navbar-header {
        float: none;
    }
    .navbar-left,.navbar-right {
        float: none !important;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-fixed-top {
        top: 0;
        border-width: 0 0 1px;
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin-top: 7.5px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .collapse.in{
        display:block !important;
    }
}