如何使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」，內容將全部垂直排列，但不確定是否有其他方式排列。