代码之家 › 专栏 › 技术社区 › grabbag

如何创建引导4卡,其中某些元素溢出卡或偏离正常流

bootstrap-4

-3

grabbag · 技术社区 · 8 年前

许多引导卡的例子中,内容都在卡的内部是线性排列的。如何添加溢出卡的元素?

这是我要找的照片:

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

1 回复 | 直到 8 年前

1

3

Fabian S. 8 年前

只需添加元素并使用 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>