1

TwitterBootstrapを使用してレスポンシブになるようにWebサイトを更新しています。私の現在のウェブサイトは@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で見ることができます

私は解決策に近づいていることを知っていますが、これを理解するのに役立つかもしれません。どんな助けでも大歓迎です。前もって感謝します。

4

2 に答える 2

0

これが私がこれを解決した方法です

@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;
    }
}
于 2016-05-24T15:24:59.563 に答える
0

メディアクエリを指定するときは、通常、次のように指定します

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

あなたが@mediaを開始していることに気付いたので、それが問題を引き起こしているかどうかはわかりません

于 2013-01-09T14:48:50.413 に答える