2

私のブートストラップ サイトには、6 枚の写真が連続して表示されています (デスクトップ ビュー)。

|  Ø  Ø  Ø  Ø  Ø  Ø   |

しかし、タブレットや電話でサイトを開くと、それらの写真をペアでグループ化し、中央に配置したいと思います。

|        Ø  Ø         |
|        Ø  Ø         |
|        Ø  Ø         |

代わりに、結果は常に次のようになります。

|Ø                    |
|Ø                    |
|Ø                    |
|Ø                    |
|Ø                    |
|Ø                    |

アイテムを適切に配置するには、クラスをどのように変更する必要がありますか?

アップデート

要素を 3 つのペアとしてグループ化しました。デスクトップ モードに切り替えると、タブレットや電話でサイトを表示する場合を除いて、すべて問題ありません。

タブレット

| Ø  Ø   Ø  Ø         |
| Ø  Ø                |

電話

| Ø  Ø                |
| Ø  Ø                |
| Ø  Ø                |

これはコードです：

<div class="row">
    <div class="span4">
      <div class="row-fluid text">
          <div class="span6">
            <p><img src="img/icon.png"></p>
          </div>
          <div class="span6">
            <p><img src="img/icon.png"></p>
          </div>
        </div>
    </div>
        <div class="span4">
      <div class="row-fluid">
          <div class="span6">
            <p><img src="img/icon.png"></p>
          </div>
          <div class="span6">
            <p><img src="img/icon.png"></p>
          </div>
        </div>
  </div> <div class="span4">
      <div class="row-fluid">
          <div class="span6">
            <p><img src="img/icon.png"></p>
          </div>
          <div class="span6">
           <p><img src="img/icon.png"></p>
          </div>
        </div>
  </div>
</div>

ありがとう！

4

3 に答える 3

2

私が作成したこの簡単なフィドルを見てくださいデモ 

<div class="span-1"><img src="http://placehold.it/300x100" alt=""></div>
<div class="span-2"><img src="http://placehold.it/300x100" alt=""></div>
<div class="span-3"><img src="http://placehold.it/300x100" alt=""></div>
<div class="span-4"><img src="http://placehold.it/300x100" alt=""></div>
<div class="span-5"><img src="http://placehold.it/300x100" alt=""></div>
<div class="span-6"><img src="http://placehold.it/300x100" alt=""></div>

上記はあなたのレイアウトに似ています

ちょっとしたCSS

div[class^="span-"] {
    width:49%; // Each image parent 49% (1% left for margin)
    float:left; // Float them all left so we can fit 2 on each line
    margin:0 .5%; // Little bit of margin for visibility 
}

div[class^="span-"]:nth-child(odd){
    text-align:right; // For every odd element align it right ( for even default is left anyway)
}

これを作ります

それだけです。ブートストラップでいくつかの競合に遭遇しますが、オーバーライドできるものはあまりないので、それを理解できるはずです。

ちなみに、クラスだけでウェブサイトを構築することはできません。ブートストラップでも使用する必要がありCSSます

ここに画像の説明を入力

于 2013-07-13T17:14:43.040 に答える
0

問題は、ビューポートがタブレットまたは電話に切り替わると、ブートストラップ レスポンシブ CSS ですべてのスパンが 100% 幅になることです。span6 クラスを使用する代わりに、新しいクラスを作成し、必要なマージンに応じて幅を 50% 近くに設定し、フロートを左に設定するだけです。

于 2013-07-13T17:16:41.583 に答える