css - bootstrap 3 带有侧面缩略图的商店布局

Question

我正在尝试由三列组成的网上商店布局:

|大拇指 |主图 |说明 |

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/

有没有更好的方法在 Bootstrap 中实现这一点，使图像完美对齐？

谢谢

Answer 1

我认为最好的选择是使用 table 而不是尝试使用网格列。网格列可能很难保持相同的高度。

DEMO