如何使Bootstrap缩略图图像具有相同的高度，以便缩略图面板对齐？

Question

我使用Bootstrap缩略图与SVG，我从维基百科获得，但由于某些原因SVG都是不同的大小，所以它会导致缩略图面板不对齐。

使用什么方法可以使缩略图图像具有相同的高度，以便缩略图面板对齐？

代码：

<div class="row"> 
    <div class="col-md-3"> 
    <div class="thumbnail"> 
     <img src="Flag_of_England.svg" style="width: 100%;" alt="England Chat"> 
     <div class="caption"> 
     <h3>England Chat</h3> 
     <p>...</p> 
     <p><a href="/chat" class="btn btn-primary" role="button">Chat</a></p> 
     </div> 
    </div> 
    </div> 
    <div class="col-md-3"> 
    <div class="thumbnail"> 
     <img src="Flag_of_Ireland.svg" style="width: 100%;" alt="Ireland Chat"> 
     <div class="caption"> 
     <h3>Ireland Chat</h3> 
     <p>...</p> 
     <p><a href="/chat" class="btn btn-primary" role="button">Chat</a></p> 
     </div> 
    </div> 
    </div> 
    <div class="col-md-3"> 
    <div class="thumbnail"> 
     <img src="Flag_of_Scotland.svg" style="width: 100%;" alt="Scotland Chat"> 
     <div class="caption"> 
     <h3>Scotland Chat</h3> 
     <p>...</p> 
     <p><a href="/chat" class="btn btn-primary" role="button">Chat</a></p> 
     </div> 
    </div> 
    </div> 
    <div class="col-md-3"> 
    <div class="thumbnail"> 
     <img src="Flag_of_Wales.svg" style="width: 100%;" alt="Wales Chat"> 
     <div class="caption"> 
     <h3>Wales Chat</h3> 
     <p>...</p> 
     <p><a href="/chat" class="btn btn-primary" role="button">Chat</a></p> 
     </div> 
    </div> 
    </div> 
</div> 

截图：

Answer 1

它看起来更像你需要调整图像的高度对准他们，但它必须是一个固定的这可能并不理想。你可以做2行，一个用于图像，一个用于文本，只要每行包含4行，class =“col-md-3”，内容将全部垂直排列，但不确定是否有其他方式排列。