如何创建Bootstrap 4卡，其中某些元素会使卡溢出或偏离正常流量

Question

Bootstrap卡中的所有内容都线性排列的许多示例。如何添加元素使卡溢出？

这是我正在寻找的图片：

如何将旋转的div放在卡片的顶部？

Answer 1

只需添加一个元素并position:absolute与之配合使用transform:rotate即可将证章拿到卡片上。使用text-center在您想文本为中心。

body {
  padding:50px; /* this is just to get some space, unneccessary for the badge implementation itself */
}

.card {
  position:relative;
}
  
.card .card-badge {
  position:absolute;
  top:-10px;
  left:-30px;
  padding:5px;
  background:blue;
  color:white;
  transform:rotate(-20deg);
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="https://dummyimage.com/286x180" alt="Card image cap">
  <div class="card-body text-center">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
  <div class="card-badge">Strawberries</div>
</div>