html - Bootstrap - Img 中的徽章保持响应

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。做有人知道我如何通过调整窗口大小将徽章包含在 img 中吗？

Answer 1

您的troop-level-badge 规则无效。有一个缺失点。所以将 troop-level-badge 替换为 .troop-level-badge ，它应该像下面这样工作。要在右侧显示徽章，您需要设置 right:2px; 而不是 left: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>