Bootstrap 4 Cards - 如何使卡片具有相同的高度以及添加水平填充/间距

Question

我正在尝试创建一个包含Bootstrap 4卡的响应式网站。我想在大屏幕上显示3张卡片，在中等屏幕上显示2张卡片，所有相同的高度都有水平和垂直填充。

当我使用此代码时，所有卡都是相同的高度：

<div class="col-md-6 col-lg-4 AMLqa card">
        <img class="card-img-top" src="http://hdimages.org/wp-content/uploads/2017/03/placeholder-image4.jpg" alt="Card image cap">
        <div class="card-body">
            <h3>Are your clients unsure how to perform some exercises or <span class="AMLqatitle">aren't happy with the foods</span> you have given them in their plans?</h3>
            <p class="AMLqatext">The app allows you store step-by-step information along with a video how to perform each exercise to ensure your clients know exactly what to do.</p>
        </div>
        <button class="btn btn-primary">See how Lifestyle Admin Panel works<i class="far fa-arrow-alt-circle-right" style="margin-left: 0.5em"></i></button>
</div>

但是当我尝试使用此代码为它们添加填充时，它们不再是相同的高度：

<div class="col-md-6 col-lg-4">
        <div class="card">
            <img class="card-img-top" src="http://hdimages.org/wp-content/uploads/2017/03/placeholder-image4.jpg" alt="Card image cap">
            <div class="card-body">
                <h3>Are you <span class="AMLqatitle">struggling to get noticed</span> amongst the thousands of other PTs in your area?</h3>
                <p class="AMLqatext">Providing a world-class service that makes you a client’s first-choice with your own professional app not offered by most other personal trainers.</p>
            </div>
        <button class="btn btn-primary">Discover Lifestyle's marketing capabilities<i class="far fa-arrow-alt-circle-right" style="margin-left: 0.5em"></i></button>
        </div>
</div>

请有人建议如何做到这一点。