Bootstrap - 图片中的徽章保持响应式

Question

我需要在一个img标签内添加徽章，与窗口大小无关。目前在我的HTML中使用以下代码（顺便提一下，我正在使用Angular - 但框架应该不相关）：

.icon-container {
  display: inline-block;
  position: relative;
}

troop-level-badge {
  position: absolute;
  bottom: 2px;
  left: 2px;
}

`
<div class="container row" *ngIf="img">
  <div class="col-md-1">
    <div class="icon-container">
      <img class="rounded" [src]="img" width="40" height="auto">
      <span class="badge badge-dark troop-level-badge">6</span>
    </div>
  </div>
</div>`

到目前为止，结果看起来是这样的（如预期）：。但是当我调整窗口大小时，徽章会超出 div 的范围。有没有人知道我怎样才能在调整窗口大小时将徽章包含在图像内呢？

- MarcoLe

Answer 1

你的 troop-level-badge 规则无效。缺少一个点。所以将 troop-level-badge 替换为 .troop-level-badge，它应该像下面这样工作。要在右侧显示徽章，需要将 left:2px; 设置为 right:2px;：

.icon-container {
  display:inline-block;
  position:relative;
}
.troop-level-badge {
  bottom:2px;
  position:absolute;
  right:2px;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">

<div class="container row" *ngIf="img">
  <div class="col-md-1">
    <div class="icon-container">
      <img class="rounded" src="https://placehold.it/100x100" >
      <span class="badge badge-dark troop-level-badge">6</span>
    </div>
    <div class="icon-container">
      <img class="rounded" src="https://placehold.it/75x75" >
      <span class="badge badge-dark troop-level-badge">6</span>
    </div>
    <div class="icon-container">
      <img class="rounded" src="https://placehold.it/50x50" >
      <span class="badge badge-dark troop-level-badge">6</span>
    </div>
  </div>
</div>

- Sebastian Brosch