bootstrap thumbnails not stacking properly

Chillout

New Member
My thumbnails from bootstrap have different heights to them, and I think that issue might be causing them to not stack properly (see screenshots and fiddle). I think I need to include a min-height for them, but I'm just not able to get it working .. can anyone lend a hand?Here is the code that I have:\[code\]<body> <div class="container-fluid"> <div class="hidden-phone"> <a href="http://stackoverflow.com/questions/15869169/newBook.php"> <button class="btn btn-large btn-primary" style="float:right; margin-top:30px;" type="button">Add Book</button> </a> </div> <div class="row-fluid"> <div class="span12 well"> <div class="row-fluid"> <ul class="thumbnails"> <li class="span4"> <div class="thumbnail"> <img src="http://placehold.it/320x200" alt="ALT NAME"> <div class="caption"> <h3>Title</h3> <p>Seller: Me</p> <p>Email: </p> <p>Cost: </p> <p>Condition: </p> <p align="center"> <a href="http://stackoverflow.com/questions/15869169/#myModal" class="btn btn-primary btn-block" data-toggle="modal">View More information</a> </p> </div> </div> </li> <li class="span4"> <div class="thumbnail"> <img src="http://placehold.it/320x200" alt="ALT NAME"> <div class="caption"> <h3>Title</h3> <span class="label label-warning" style="margin-bottom: 10px;">Book has been sold!</span> <p>Seller: Me</p> <p>Email: </p> <p>Cost: </p> <p>Condition: </p> <p align="center"> <a href="http://stackoverflow.com/questions/15869169/#myModal" class="btn btn-primary btn-block" data-toggle="modal">View More information</a> </p> </div> </div> </li> <li class="span4"> <div class="thumbnail"> <img src="http://placehold.it/320x200" alt="ALT NAME"> <div class="caption"> <h3>Title</h3> <p>Seller: Me</p> <p>Email: </p> <p>Cost: </p> <p>Condition: </p> <p align="center"> <a href="http://stackoverflow.com/questions/15869169/#myModal" class="btn btn-primary btn-block" data-toggle="modal">View More information</a> </p> </div> </div> </li> <li class="span4"> <div class="thumbnail"> <img src="http://placehold.it/320x200" alt="ALT NAME"> <div class="caption"> <h3>Title</h3> <p>Seller: Me</p> <p>Email: </p> <p>Cost: </p> <p>Condition: </p> <p align="center"> <a href="http://stackoverflow.com/questions/15869169/#myModal" class="btn btn-primary btn-block" data-toggle="modal">View More information</a> </p> </div> </div> </li> <li class="span4"> <div class="thumbnail"> <img src="http://placehold.it/320x200" alt="ALT NAME"> <div class="caption"> <h3>Title</h3> <p>Seller: Me</p> <p>Email: </p> <p>Cost: </p> <p>Condition: </p> <p align="center"> <a href="http://stackoverflow.com/questions/15869169/#myModal" class="btn btn-primary btn-block" data-toggle="modal">View More information</a> </p> </div> </div> </li> </ul> </div> </div> </div> </div> </body>\[/code\]Fiddle: \[code\]http://jsfiddle.net/Z3VwZ/\[/code\]screens:
9pTVh.png
4t4Us.png
 
Back
Top