【问题标题】：How to create a badge inside another?如何在另一个内部创建一个徽章？
【发布时间】：2015-10-18 11:35:23
【问题描述】：

我提交了一张带有徽章的图片，里面有另一个徽章，我想弄清楚他们是怎么做到的？

【问题讨论】：

我认为较大的不是 Bootstrap 徽章，它的样式略有不同 - 看看渐变。我认为这只是一个自定义样式的span。
感谢您的评论。我相信你是对的，但我仍然对他们如何实现它感兴趣。你有什么建议吗？

标签： html css twitter-bootstrap angular-ui-bootstrap

【解决方案1】：

说明

为了实现所需的行为，请在包装元素中使用属性position: relative，并在子元素中使用position: absolute。

然后用top: 0 和right: 0 将子元素定位在右上角/右上角。

最后一部分需要 CSS3 属性 transform 和 translate 属性。您可以在CSS3 2D Transforms 或transform | CSS-Tricks 中阅读更多相关信息。

我们将在这里使用transform: translate(50%, -50%)。第一个50% 表示元素将错位到其自身宽度的一半，第二个50% 表示元素将错位到其自身高度的一半。

如果您的徽章具有固定的宽度和/或高度，您可以跳过此部分，而只需使用固定值。

示例

body {
  margin: 25px
}
.outter-badge {
  position: relative;
  margin: 10px;
}
.inner-badge {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(50%, -50%);
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css">

<div class="badge outter-badge">badge
  <div class="badge inner-badge">1</div>
</div>

<div class="badge outter-badge">primary label
  <div class="label label-primary inner-badge">1</div>
</div>

<div class="badge outter-badge">success label
  <div class="label label-success inner-badge">1</div>
</div>

<div class="badge outter-badge">warning label
  <div class="label label-warning inner-badge">1</div>
</div>

<div class="badge outter-badge">danger label
  <div class="label label-danger inner-badge">1</div>
</div>

<div class="badge outter-badge">info label
  <div class="label label-info inner-badge">1</div>
</div>

【讨论】：