I think your best bet would just be to use a table
instead of trying to use grid-columns. Grid-columns can be a pain to keep the same height.
bootstrap 3 shop layout with side thumbnails
-
03-10-2022 - |
题
I'm trying a web shop layout consisting in three columns:
| thumb | main image | description |
the thumbs column, contains three images that should be resized exactly to match the main image height. I'm using the img-responsive class but there are some minimal pixel differences when I display this layout on different sizes.
<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>
here is example http://jsfiddle.net/F6vtb/embedded/result/
Is there a better way to achieve this in bootstrap, so the images are perfectly aligned?
thanks
解决方案
不隶属于 StackOverflow