1

Rails アプリで次のメディア クエリを使用したいと考えています。

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

   }

フロントエンドのフレームワークとしてブートストラップを使用しています。通常、Bootstrap CSS の一部をオーバーライドしたい場合は、コードをオーバーライド スタイルシートに入れますが、メディア クエリをどこに置くべきかわかりません。メイン スタイルシートとオーバーライド スタイルシートを試しましたが、読み取れませんでした。ここで基本的なルールが欠けていると確信しており、誰かが私を正しい方向に向けることができれば幸いです

4

1 に答える 1

1

Chrome は、CSS 優先度のデバッグに最適です。

<style>直前にCSSをタグに配置しました</head>

そして追加さ.centerれた.navbar

次に、を右クリックして.navbar、Inspect Element

左下のコード内を移動できます。クリックする.navと、選択範囲に適用された CSS が右下に表示されます (メディア クエリを認識できます)。

.center.navbarCSS の位​​置は問題ではありません。2 つのクラスが含まれており、デフォルトの動作では 1 つのクラスのみが使用されるため、オーバーライドが優先されます 。

クロムでcssをデバッグする

クラス.centerを確認して.navbarください。

ノート：

私にとって、あなたの問題には3つの理由が考えられます。

  • が.centerありません（そのため、存在することを確認するように依頼しまし.centerた）
  • キャッシュは CSS を提供するため、Web ブラウザーのキャッシュをクリアする必要があります。
  • メディア クエリがスタイルシートに存在しない (それを証明するために chrome でデバッグできます)
于 2012-07-05T19:25:39.793 に答える