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;
    }
}