web-dev-qa-db-ja.com

Bootstrap縦と横の列表示

ブートストラップはかなり新しいのですが、とにかく、デバイス画面が常に「md」サイズの列を使用するポートレートの場合と、常に「xs」列を使用するランドスケープの場合に質問がありますか？

csstwitter-bootstrapresponsive-designmedia-queries
19
meztli

Extend Bootstrap新規または変更されたメディアクエリを使用するCSS。通常、元のbootstrap.cssファイルを残して、変更を加えて拡張するのが最善の方法です。使用するグリッドクラスを再作成します。次に例を示します。

@media (min-width: 992px) and (orientation:landscape) {
    .col-md-4 {
        // some properties
    }
}

@media (min-width: 992px) and (orientation:portrait) {
    .col-md-4 {
         // redefined
    }
}

Skellyが述べたように、この時点ではBootstrap自体に方向スイッチは組み込まれていません。

21
jtheman

ここに私の実際の解決策があります

@media (orientation: portrait){
   .portrait{
       width: 100%;
   }
   /*div[class^='col-xs'], div[class*='col-xs']{
       width: 100%;
   }*/
}

2つのソリューション：

1-は、「portrait」クラスを、幅= 100％のポートレートで表示するdivに追加します。

2-コメントを外し、メディアの2番目のルールを使用します。これは、幅col-xsで始まるクラス名を持つすべてのdivにwidth：100％を適用します

2
Leonardo Cabré

私の知る限り、これを「そのまま」行う方法はありません。Bootstrapは、向きではなく画面の幅に基づいたメディアクエリを使用します。

1
Zim