Bootstrap - Img 中的徽章响应式答案

【问题标题】：Bootstrap - Badge in Img mantain responsiveBootstrap - Img 中的徽章响应式
【发布时间】：2018-11-17 21:25:54
【问题描述】：

我需要一个 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 中吗？

【问题讨论】：

标签： html css twitter-bootstrap image responsive-design

【解决方案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>

【讨论】：