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导航不会崩溃。

可以在我的测试版网站@ 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;
    }
}

Twitter Bootstrap - 导航崩溃

2 个答案: