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

【问题标题】：Posistioning .card-img-top on bootstrap在引导程序上定位 .card-img-top
【发布时间】：2018-11-18 13:22:49
【问题描述】：

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

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

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

【问题讨论】：

您对哪个元素有问题？右边第三列？
与您的问题相关的代码直接属于您的问题，而不仅仅是转储在外部网站上 - 请相应地编辑您的问题。
@MathiasRechtigel 是的第三栏

标签： css twitter-bootstrap

【解决方案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>

【讨论】：

调整屏幕大小时，第三列刚好与其余卡片重叠