Twitter Bootstrap - 导航崩溃答案

【问题标题】：Twitter Bootstrap - Nav collapseTwitter Bootstrap - 导航崩溃
【发布时间】：2012-12-23 01:15:31
【问题描述】：

我正在努力更新我的网站以使用 Twitter Bootstrap 进行响应。我目前的网站可以查看@http://www.JoshuaBock.com。

我在尝试自定义导航栏折叠功能时遇到问题。目前我让它正确显示，但它在 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查看

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

【问题讨论】：

“不工作”能再清楚一点吗？您是指菜单没有按照应有的方式折叠，还是它围绕着“Joshua Bock...Web Designer...”标题？
我确实指的是那些没有按照应有的方式崩溃的人。一旦我弄清楚折叠问题，包装问题就会得到修复，事实上它可能已经修复了。
从 beta 链接来看，您现在似乎已经解决了这个问题。如果是这样，您可以添加您的解决方案并关闭问题吗？
问题仍然存在。当屏幕在 979px 和 1126px 之间时，折叠菜单在单击时不会展开。
有人有其他想法吗？

标签： javascript css twitter-bootstrap responsive-design media-queries

【解决方案1】：

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

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

注意到你的启动 @media，所以不确定这是否会导致任何问题

【讨论】：

这似乎不是导致问题的原因。
我已经找到了解决这个问题的方法。根据这个问题的 cmets：stackoverflow.com/questions/12486051/…

【解决方案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;
    }
}

【讨论】：