2016-07-23 9 views
0

私はブートストラップを初めて使い、画像ギャラリーを作りたいと思っています。どのように私は期待しブートストラップで間違った画像ギャラリーを取得しています

enter image description here

あるしかし、私はこのようにそれを取得しています:

enter image description here

私のHTMLコードは以下です:

<div class="row"> 
        <div class="col-md-4"> 
         <a href="#" class="thumbnail"> 
          <img src="img/sell/5.jpg" class="img-responsive" alt="..."> 
         </a> 
        </div> 
        <div class="col-md-8"> 
         <div class="col-md-12"> 
          <a href="#" class="thumbnail"> 
           <img src="img/slider/slider-1.jpg" class="img-responsive" alt="..."> 
          </a> 
         </div> 
         <div class="col-md-6"> 
          <a href="#" class="thumbnail"> 
           <img src="img/sell/5.jpg" class="img-responsive" alt="..."> 
          </a> 
         </div> 
         <div class="col-md-6"> 
          <a href="#" class="thumbnail"> 
           <img src="img/sell/5.jpg" class="img-responsive" alt="..."> 
          </a> 
         </div> 
</div> 

正しい書き方を教えてくださいコード。

+0

あなたはそれを正しく得ていますが、唯一の違いは、あなたの予想では、左の画像の高さが右の画像の高さに等しいことです。しかし、右の列のサブ行を使用する方が良いでしょう。 – AliIshaq

+0

ご返信ありがとうございます。 サブ行についてはわかりません...それらの使用方法を教えてください。 – Aman

+0

ここでは必要ありません。しかし、右の列を行に分割しようとするならば、 "col"内に "行"を持つことができます。 – AliIshaq

答えて

0

正しいコードがあります。違いは、あなたの左の画像は右の画像の高さが等しいではないということです。

この例では、左側の画像は右側の2行の画像の高さに等しいです。右側に長いイメージを使用すると、それが修正されます(または、左側の列にもっと広い列スペースが与えられます)。

関連する問題