如何使Bootstrap縮略圖圖像具有相同的高度，以使縮略圖面板對齊？

Question

我將Bootstrap縮略圖與從Wikipedia獲得的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”的行，內容將全部垂直對齊，但是不確定是否有另一種方法