2017-03-17 15 views
1

XS画面のみを対象としたCSSを適用しようとしましたが、中画面にも適用されています。余分な小文字用のブートストラップグリッドスタイルも中画面用に動作します

enter image description here

.COL-XSのために明確に定義されたスタイルを参照してください、私はデスクトップ上でフルスクリーンでそれを見ていますし、それは、xsに特定のスタイルをレンダリングします。

ここで何か間違っているか、ブートストラップからスニペットが抜けていますか?メディアクエリがない限り

おかげで、要素の

+3

あなたは、彼らが 'COL-XS-12'クラスを持っているかどうかに基づいて要素を選択している - そして、あなたの要素が*任意の*ビューポートの幅で、そのクラスを持っています。特定の画面サイズでのみ動作させたい場合は、セレクタを適切なメディアクエリでラップする必要があります。 – CBroe

+0

hmm ...スタイルは、col-xs-12の中にある要素だけを構成するように指定することはできません。ブートストラップを使用するときにメディアクエリを使用できなくなったと思います... –

+2

_ "指定できませんスタイルは、あなたの要素_always_がこのクラスを持っているので、col-xs-12 "_ - noの中にある要素だけを形成します。そのクラスは一定の画面幅で魔法のように消えません。これらの要素が異なる画面サイズで異なるのは、Bootstrap自体がメディアクエリを使用して、異なる画面サイズで異なるクラスの要素をフォーマットするためです。つまり、 'col-xs-12'クラス自体の要素に「自動的に」作用します。 [...] – CBroe

答えて

3

CSSクラスはは常に適用されます。 Bootstrap specific media queriesの場合

これは..あなたが今、ブートストラップの列を使用している

@media (max-width: 768px) { 

    .prop-image { 
     margin-right: auto; 
     margin-left: auto; 
    } 

} 
-1

方法はMD幅スパンで4列を言うおよびxs幅でページ全体にまたがるされることになります。コンテンツを隠すことは何もしません。

あなたは非表示にのみ、あなたがメディアクエリを必要XS画面幅でコンテンツを表示する簡単な方法をしたい、または別のオプションは、*

.visible-XS-の応答ユーティリティクラスに建てられたブートストラップを使用する場合。

これは、xsに含まれる要素のみを表示します。

http://getbootstrap.com/css/#responsive-utilities-classes

関連する問題