引导程序，如何使所有卡（带有图像）的大小相同？

Question

已编辑

我不确定为什么将它重复到另一个问题，因为另一个问题是纯CSS。

当前，卡片网格看起来像这样

但是我的目标是使所有卡具有相同的大小，并且没有任何空格。如何实现呢？

我使用了先前问题中的代码

HTML

<div class="col-lg-3 col-md-3 bottommargin-sm">
  <div class="card">
    <img class="card-img-top img-fluid" src="https://i.imgur.com/nXSiWbw.jpg" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Long text Long text Long text Long text</h5>
      <span>$300,000.00</span>
    </div>
  </div>
</div>

<div class="col-lg-3 col-md-3 bottommargin-sm">
  <div class="card">
    <img class="card-img-top img-fluid" src="https://i.imgur.com/nXSiWbw.jpg" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Text text</h5>
      <span>$300,000.00</span>
    </div>
  </div>
</div>

<div class="col-lg-3 col-md-3 bottommargin-sm">
  <div class="card">
    <img class="card-img-top img-fluid" src="https://i.imgur.com/nXSiWbw.jpg" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Text text</h5>
      <span>$300,000.00 Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text</span>
    </div>
  </div>
</div>

<div class="col-lg-3 col-md-3 bottommargin-sm">
  <div class="card">
    <img class="card-img-top img-fluid" src="https://i.imgur.com/0dXOdvZ.jpg" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    </div>
  </div>
</div>

jsfiddle codes can be view here