1

この例のような 2 列の画像グリッドを作成したいと考えています。Twitter Bootstrap グリッドを使用してこれを達成するための最良の方法についての提案を探していますか? 私はこれをやろうとしましたが、あまり成功しませんでした。私の主な問題は、画像間の溝が不均一であること、ページの中心線に画像を揃えることができないこと、および縦向きと横向きの両方の画像をどのように処理するかでした。前もって感謝します。

編集：推奨されるように、結果のスクリーンショットを含む例を提供しました。

 <div class="container">
  <div class="row">
    <div class="span12">
       <div class="row">
        <div class="span4"><img src="http://goo.gl/l9uUR"></div>
        <div class="span4"><img src="http://goo.gl/l9uUR"></div>
        <div class="span4"><img src="http://goo.gl/l9uUR"></div>
      </div>
      <div class="row">
        <div class="span8"><img src="http://goo.gl/mrllo"></div>
        <div class="span4"><img src="http://goo.gl/l9uUR"></div>
      </div>
      <div class="row">
        <div class="span4"><img src="http://goo.gl/l9uUR"></div>
        <div class="span8"><img src="http://goo.gl/mrllo"></div>
      </div>
    </div>
  </div>
</div>

span4 の最初の行は完全に整列していますが、次の 2 つの行の span4 の下部は、画像が示すように span8 の下部に整列していません。

ここに画像の説明を入力

4

1 に答える 1

1

わかりました、ブートストラップで列をネストすることを読むと、これに役立つようです。達成しようとしていることは比較的簡単です。それを理解するのに時間がかかります

http://twitter.github.com/bootstrap/scaffolding.html#responsive

私はこれを試してみましたが、うまくいきますが、サイズがすべて異なるため、適切な画像を適切な場所に配置するだけで済みます

      <div class="container">
   <div class="row">
    <div class="span8">
     <img src="http://example">
    </div>

    <div class="span4">
         <img src="http://example">
    </div>
   </div><!--row-->
      </div><!--container-->

     <div class="container">
  <div class="row">
   <div class="span6">
    <img src="http://example">
   </div>
     <div class="row">
      <div class="span6">
    <img src="http://example">
      </div>
    </div><!--row-->
     <div class="span6">
      <img src="http://example">
    </div>
          </div><!--row-->
        </div><!--container-->

        <div class="container">
     <div class="row">
      <div class="span9">
    <img src="http://example">
      </div>
    <div class="span3">
     <img src="http://example">
    </div>
    <div class="row">
     <div class="span3">
      <img src="http://example">
     </div>
    </div><!--row-->
           </div><!--row-->
          </div><!--container-->
于 2012-12-20T08:24:19.220 に答える