0

現在の状況

<div class="span3">左の列と右の列にが<div class="span9">あります。(モバイルまたはタブレットで) 小さいサイズにサイズ変更すると、左側の span3 クラスが span9 クラスの上になります。

望ましい状況

サイズが変更されている場合でも、2つの列を持ち続けたいので、1つの列に折りたたむのは望ましくありません。小さい画面サイズ (モバイル/タブレットなど) では 1:11 の比率で表示でき、大きい画面サイズ (ラップトップ/モニターなど) では 3:9 を維持できればよいでしょう。

Twitter Bootstrap のレスポンシブ デザイン レイアウトで、これが望ましい状況になるかどうかを教えてください。

4

1 に答える 1

1

いいえ、Twitter Bookstrap のレスポンシブ レイアウトを使用すると、望ましい状況が実現可能です。

しかし、修正するのは難しいことではありません。

これを発生させたい場合は、要素に別のクラスのセットを追加する必要があります。デフォルトでは、すべての要素がモバイルにスタックされます。これは、線形バージョンが期待されるためです。http://foundation.zurb.com/docs/grid.phpを確認すると、Zurb が 4 列のモバイル グリッドに基づく別のスタイル セットも作成していることがわかります。これらの追加クラスを追加することにより、列が 1/3 1/2 2/3 全幅を占めるように制御できます。

パディングとマージンを無視すると、これらの線に沿った何かが得られます

.mobile-one {width: 25%;}
.mobile-two {width: 50%;}
.mobile-three {width: 75%;}
/* We've left this one off because it's the same style that is already applied 
.mobile-one {width: 100%;} */

次に、既存の HTML に追加できます

 <div class="span3 mobile-one">...</div>
 <div class="span9 mobile-three">...</div>

また

 <div class="span3 mobile-two">...</div>
 <div class="span9 mobile-two">...</div>

編集

使用する基本的な例をコード化しました -> http://playground.responsivedesign.is/twitter-bootstrap/

于 2013-01-09T06:56:30.860 に答える