如何创建一个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>