2

メディアクエリをブートストラップで機能させるのに問題があります（レールを使用）。以下はメディアクエリです

    @media (min-width: 768px) {

   .center.navbar .nav, .center.navbar .nav > li {
    display:inline-block;
    float:none;
     vertical-align:top;
    width:100%;
    }

  .center .dropdown-menu {
  display: none;
  text-align:left;

   }

 .center .dropdown.open ul {

 display: block;

   }

上記のメディアクエリは、画面サイズに関係なく、すべてのデフォルトの動作をオーバーライドします。基本的にクエリが2つのクラスを使用しているため、何が起こっているのかを説明するために@baptmeからアドバイスを受けました（ありがとうございます）。デフォルトの動作では1つのクラスが使用され、メディアクエリがオーバーライドされます。したがって、私の質問は、この例では画面サイズが768px未満の場合にのみメディアクエリを機能させ、そうでない場合はデフォルトのスタイルをオーバーライドする方法です。

ただし、これは、Firebugの要素を検査するときに、デフォルトが次のようになっているため、少し混乱するところです。

      .center.navbar .nav, .center.navbar .nav > li {
       display: inline-block;
       float: none;
       vertical-align: top;
       }

      .center .dropdown-menu {
      text-align: left;
        }

誰かがこれにこれ以上の光を当てることができますか、あなたがそれが実際に動作しているのを見たいのであれば、助けていただければ幸いです

     http://46.32.253.11/
4

1 に答える 1

2

あなたの例から：

これにより、ドロップダウンが非表示になり、黒いホバーが削除され、左側に配置されたリンクが上下に表示されます。

@media (max-width: 979px) {
  .navbar  .dropdown-menu {display:none}
  .navbar .nav > li a:hover { background-color:transparent}
  .center.navbar .nav, .center.navbar .nav > li {display: table;clear:both};
}

結果

于 2012-07-06T12:29:05.207 に答える