时间戳

首页 > 解决方案 > 在引导程序上定位 .card-img-top

css - 在引导程序上定位 .card-img-top

问题描述

我正在尝试使用引导程序设计与下面显示的图像非常相似的东西在此处输入图像描述

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

我已经提供了我的代码在此处输入链接描述

标签： csstwitter-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>

推荐阅读