Bootstrap - Знак в Img Mantain отзывчивый - PullRequest
Новая
       21

Bootstrap - Знак в Img Mantain отзывчивый

0 голосов
/ 08 июня 2018

Мне нужен значок в 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>`

пока результат выглядит так (как и ожидалось): expected Version

Но когда я изменяю размерокно выпадает из див.Кто-нибудь знает, как я могу поместить значок в IMG, даже изменив размер окна?

1 Ответ

0 голосов
/ 08 июня 2018

Ваше 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>
...