Jak umieścić znaczek w prawym dolnym rogu "nośnika" w bootstrapie?

Question

Korzystając z funkcji Bootstrap media, w jaki sposób mogę umieścić badge w prawym dolnym rogu obrazu bloku multimediów (tak aby znajdował się na górze obrazu)?

Answer 1

Z takim znaczników:

<div class="media"> 
    <a class="pull-left" href="#"> 
     <img class="media-object" src="http://placehold.it/64x64" /> 
     <span class="badge badge-success pull-right">2</span> 
    </a> 
    <div class="media-body"> 
    <h4 class="media-heading">Media heading</h4> 
    My content 
    </div> 
</div> 

Masz odznakę w prawym dolnym rogu obrazu, ale pod. Jeśli ma to być nieco nad obrazem, dodaj css:

.media img+span.badge { 
    position: relative; 
    top: -8px; 
    left: 8px; 
} 

Zobacz ten Fiddle: http://jsfiddle.net/d7kXX/

Ale oczywiście można umieścić go tam, gdzie chcesz. Jeśli chcesz, aby było wygodniej, spróbuj tego:
http://jsfiddle.net/6cME7/

FYI, jeśli zmienisz rozmiar, zepsuje się rozmiar plakietki. Sądzę, że daje to ogólny pogląd, ale myślę, że nie jest w pełni funkcjonalny.

Answer 2

Trudno powiedzieć, co chcesz dokładnie nie widząc swój kod, ale dałem mu strzał i tak:

HTML

<div class="media"> 
     <a class="pull-left relative" href="#"> 
      <img class="media-object" src="http://placekitten.com/200/150" /> 
      <span class="label label-warning bottom-right">Cute kitten</span> 
     </a> 

     <div class="media-body"> 
      <h4 class="media-heading">Media heading</h4> 
      Cras sit amet 
     </div> 
    </div> 

CSS

.relative { 
    position: relative; 
} 
.label.bottom-right { 
    position: absolute; 
    right: 2px; 
    bottom: 2px; 
} 

Wolę użyciu pozycjonowania bezwzględnego kiedy rzecz musi być wyrównana względem dna i/lub prawa, ponieważ jest to najprostsza i najbardziej niezawodna metoda imo.

Demo: http://www.bootply.com/suRioyheqL