0

私は異常な動作のブートストラップとメディアクエリを取得したいと思います。lgのxs解像度として1つのdivのみ

1つのdiv(a)の内容は、ブラウザウィンドウの幅ではなく、その幅に依存する必要があります。写真(a)の場合は600pxの幅があり、XSとして表示する必要があり、コンテナはLGとして動作する必要があります。

https://i.stack.imgur.com/x2gnr.png

答えて

0

あなたは間違ってブートストラップを考えています。

ブートストラップのポイントは、画面の幅に応じて要素の動作を簡単に変更できるようにすることです。たとえば、グリッドシステムのみを使用している場合は、画面のwidthに基づいて要素自体のwidthが変更されます。

あなたのa要素が画面の幅に関係なく、すべての回でsmとして振る舞う(あるいは少なくともそれは例えば、xs達するまで)にしたい場合は、あなたのようなものを使用することができます

<div class=" div-a -col-sm-6"></div> 

これは、画面幅がsmより大きい限り、6列のdiv Aを表示するようブートストラップに指示します。

私はあなたが「LGとして行動するコンテナ」によってあなたが何を意味しているのかはわかりませんが、私はあなたがそれがLGスクリーンのためだけに変更されるべきであるということを意味します。次に:

<div class="container-div col-LG-12 col-*-newSize"> 
    <div class=" div-a -col-sm-6"> 
    *content* 
    </div> 
    <div class="container-b-c col-*-6" 
    <div class"div-b col-*-12" 
     -content- 
    </div> 
    <div class"div-c col-*-12" 
     -content- 
    </div> 
</div> //End of container-b-c 
</div> //end of container-div 

*は必要なサイズです。

+0

私はブートストラップの仕組みを理解しています。しかし、そのような奇妙な振る舞いを必要とする新しい要件があります。ページ全体が「正常に」動作するが、1つの部門は厳密に「解決」を決定していなければならない。 –

+0

私は見る。この方法でブートストラップを動作させるのではなく、手動メディアクエリを使用するほうが簡単でしょうか? –

+0

私はまだiframeを使用していますが、したくないです –

0

私はブートストラップの仕組みを理解しています。しかし、そのような奇妙な振る舞いを必要とする新しい要件があります。ページ全体が「正常に」動作するが、1つの部門は厳密に「解決」を決定していなければならない。

関連する問題