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

Question

I'm using Bootstrap thumbnails with SVG that I got from Wikipedia but for some reason the SVG are all different sizes so it causes the thumbnail panels to not align.

Using what method can I make the thumbnail images the same height so that the thumbnail panels align?

Code:

<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>

Screenshot:

Answer 1

It looks more like you'd need to adjust the height of images to align them, but it would have to be a fixed number which probably isn't ideal. You could made 2 rows, one for images and one for text, and as long as each row contained 4 rows with class="col-md-3" the content would all align vertically, but not sure there's another way around it