jquery - Bootstrap 卡覆盖另一张卡(图片)

Question

我们如何使用 Bootstrap 来实现这一点？

我认为这是带有图像叠加的卡片叠卡片。

有人可以帮忙吗？

Answer 1

检查下面的代码片段

.c {
  padding: 15px;
  margin-top: 30px;
  box-shadow: 0 0 16px 1px rgba(0, 0, 0, 0.1);
}

.c img {
  width: 100%;
  object-fit: cover;
  border-radius: 3px;
  /* background-color: white; */
  box-shadow: 0 3px 20px 11px rgba(0, 0, 0, 0.09);
}

.c .top-sec {
  margin-top: -30px;
  margin-bottom: 15px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<div class="container">
  <div class="row">
    <div class="col-4">
      <div class="card c">
        <div class="top-sec">
          <img src="http://via.placeholder.com/350x150">
        </div>
        <div class="bottom-sec">
          <p> Some data here</p>
          <p> Some data here</p>
          <p> Some data here</p>
          <p> Some data here</p>

        </div>
      </div>
    </div>
    <div class="col-8">

    </div>
  </div>

</div>