Pomstioning .card-img-top on bootstrap

Question

我尝试使用bootstrap

尝试设计与下图所示图像非常相似的内容

我在将.card-img-top图像垂直对齐它们之间的空间方面遇到了问题。我试过把两个＆＃39; .card-img-top＆＃39;图像在同一个＆＃39; .col＆＃39;然后应用填充，但没有产生我想要的结果。

我提供了我的代码enter link description here

Answer 1

尝试在最后一列中嵌套引导行，然后在它们之间添加一些填充：

<div class="col-12 col-md-4">
        <div class="row">
          <div class="col-12">
            <div class="card img-fluid">
              <img class="card-img-top" src="https://www.treeservicesmagazine.com/wp-content/uploads/2017/03/safety-ppe-image.jpg" alt="Card image">
              <div class="card-img-overlay">
                <p class="card-text">Personal <br>Protective Equipment.</p>
                <a href="#">SHOP NOW</a>
              </div>
            </div>
          </div>
          <div class="col-12" style="padding-top:20px;">
            <div class="card img-fluid">
              <img class="card-img-top" src="https://www.treeservicesmagazine.com/wp-content/uploads/2017/03/safety-ppe-image.jpg" alt="Card image">
              <div class="card-img-overlay">
                <p class="card-text">Personal <br>Protective Equipment.</p>
                <a href="#">SHOP NOW</a>
              </div>
            </div>
          </div>
        </div>