css - 在 bootstrap 上定位 .card-img-top

Question

我正在尝试使用 Bootstrap 设计与下图非常相似的东西

我在将 .card-img-top 图像与它们之间的空间垂直对齐时遇到问题。我尝试将两个“.card-img-top”图像放在同一个“.col”中，然后应用未产生我想要的结果的填充。

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

Answer 1

尝试在最后一列中嵌套一个 bootstrap 行，然后像这样在它们之间放置一些填充:

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