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

Question

我使用的是带有SVG的Bootstrap缩略图，这是我从维基百科获得的，但由于某些原因，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 =＆＃34; col-md-3＆＃34;内容将全部垂直对齐，但不确定是否有另一种方式