0

すでにご存知のとおり、767px以下の場合、twitterブートストラップは各スパン*を100％の幅にスケーリングします。したがって、たとえば、768px以上に2つの列がある場合：

<div class="row">
    <div class="span6">Column 1</div>
    <div class="span6">Column 2</div>
</div>

これが結果です：

| column 1 | column 2 | <- desktops

767px以下では、次のように折りたたまれます。

| column 1 |   <- tablets, mobile
| column 2 |

そしてこれが本来あるべき姿です。
しかし…ある行に対してこの動作をしたいが、別の行に対してはしたくない場合、どのようにアプローチしますか？
767pxの下でも2つ（またはそれ以上）の列を残すにはどうすればよいですか？

<div class="row">
    <div class="span6">Column 1</div>
    <div class="span6">Column 2</div>
</div>

<div class="special row">
    <div class="span6">Column 1</div>
    <div class="span6">Column 2</div>
</div>

| column 1 | column 2 | <- desktops
| column 1 | column 2 | 

| column 1 |   <- tablets, mobile
| column 2 |
| c1 |  c2 |

私は本当に興味があります。

4

1 に答える 1

5

これが重複でタグ付けされているかどうかを確認するのを待つ間、これを回答に移動しました。

モバイル/タブレット環境内で2つの列を維持するには、要素に別のクラスセットを追加し、CSSにいくつかのルールを追加する必要があります。

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

使用する基本的な例をコーディングしました-> http://playground.sensitivedesign.is/twitter-bootstrap/ですが、以下に詳細を示します。

これは、HTML（追加の.mobile-*クラス）に追加するマークアップです。

 <div class="span4 mobile-one">...</div>
 <div class="span8 mobile-three">...</div>

また

 <div class="span6 mobile-two">...</div>
 <div class="span6 mobile-two">...</div>

そして、追加する必要のあるCSSは..

.row-fluid .mobile-one {
  width: 31.491712707182323%;
  *width: 31.43852121782062%;
}

.row-fluid .mobile-three {
  width: 65.74585635359117%;
  *width: 65.69266486422946%;
}

.row-fluid .mobile-two {
  width: 48.61878453038674%;
  *width: 48.56559304102504%;
}

.row-fluid .mobile-one,
.row-fluid .mobile-two,
.row-fluid .mobile-three {
  float:left;
  margin-left: 2.7624309392265194%;
  *margin-left: 2.709239449864817%;
}

.rowまた、を使用する代わりにで動作するかどうかも尋ねました.fluid-row。それは可能ですが、カスケードされているいくつかのルールが付属して.fluid-rowいるため、もう少し試行錯誤する必要があります。私の公式のスタンスは、ピクセルベースの静的レイアウト（@mediaで応答しますが）の理由を再考し、流動的なレイアウトを採用することです。

于 2013-01-21T00:04:01.227 に答える