web-dev-qa-db-ja.com

CSSメディアクエリを上書きする

私は好きではないCSSメディアクエリを使用するページを毎日扱っています。私はむしろ全ページを使いたいです（それらのほとんどはTwitterに関連していますBootstrap 768pxより狭いとメニューが折りたたまれます）。

CSSでBootstrapのメディアクエリをオーバーライドする方法はありますか？自分のメディアクエリを定義せずに、すべてのルールを個別にオーバーライドすることはできません。これにはかなり時間がかかると思います。

編集：ソースコードを制御できません。そうでなければ、ブートストラップ応答コードを強制終了します。

csstwitter-bootstrapmedia-queries
23
Kevin Burke

そもそもなぜ削除しないのですか？

できない場合でも、CSS宣言をルールでオーバーライドできます。

  • 同じセレクター優先度を持ち、来る後 MQブロック
  • mQブロックのルールよりもセレクタの優先度が高い
  • 値とセミコロンの間に!importantがあるもの
    /* one id, one class AND one element => higher priority */
    #id element.class { property: value2; }

    /* !important will nuke priorities. Same side effects as a nuke,
       don't do that at home except if you've tried other methods */
    #id .class { property: value2 !important; }

    @media(blah) {
      /* Overridden. Thrice. */
      #id .class { property: value1; }
    }

    /* same selector, same everything except it comes after the one in @media?
       Then the latter is applied.
       Being in a @media doesn't give any more priority (but it won't be applied
       everywhere, depending on "blah", that's the point of MQ) */
    #id .class { property: value2; }

前の例では、@mediaブロックの外側の宣言は、内側の宣言をオーバーライドします。 value1ではなくvalue2が適用される理由は3つあります。

11
FelipeAls

ブートストラップresponsive.cssもオーバーライドします。

Webサイトの半分を使用して、デフォルトのresponsive.cssを使用したいのですが、もう1つの半分については、1つのメディアクエリが誤ったレイアウトを引き起こすため、削除します。

私の調査によるとcssではメディアクエリを削除できません。

そこで、私はresponse.cssをコピーしてメディアクエリを削除します。ソースにアクセスできない場合は、オーバーライドが唯一の選択肢である可能性があります。

2
citykid