bootstrap 3帶有側面縮略圖的店鋪佈局

Question

我正在嘗試一個網頁版面包含三列：

| thumb |主圖像|描述|

thumbs列包含三幅應該調整大小以匹配主圖像高度的圖像。我使用的是img-responsive類，但是當我以不同的尺寸顯示此佈局時，存在一些最小的像素差異。

<div class="row"> 
    <div class="col-md-8"> 
     <div class="row"> 
      <div class="col-xs-3" id="prodThumbs"> 
       <img src="http://placehold.it/170x255" class="img-responsive"> 
       <img src="http://placehold.it/170x255" class="img-responsive"> 
       <img src="http://placehold.it/170x255" class="img-responsive"> 
      </div> 
      <div class="col-xs-9"> 
       <img src="http://placehold.it/534x800" class="img-responsive"> 
      </div> 
     </div> 
    </div> 
    <div class="col-md-4"> 
     <div class="row"> 
      <h3>Price: 40,- €</h3> 
      <button type="button" class="btn-default">add to cart</button> 
     </div> 
    </div> 
</div> 

我這裏是http://jsfiddle.net/F6vtb/embedded/result/

有沒有更好的方式引導來實現這一點，因此圖像完全一致？

感謝

Answer 1

我認爲最好的也只是使用table，而不是試圖用網格列。網格列可以很難保持相同的高度。

DEMO