如何使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”的行，内容将全部垂直对齐，但是不确定是否有另一种方法