बूटस्ट्रैप में "मीडिया" के निचले दाएं कोने में बैज कैसे रखें?

Question

बूटस्ट्रैप media सुविधा का उपयोग करके, मैं मीडिया ब्लॉक की छवि के निचले दाएं भाग में badge कैसे रख सकता हूं (इसलिए यह छवि के शीर्ष पर है)?

Answer 1

इस तरह के एक मार्कअप के साथ

:

<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> 

आप चित्र के नीचे दाईं है, लेकिन नीचे में अपना बैज की है। आप इसे छवि पर एक सा होना चाहते हैं, इस सीएसएस जोड़ें:

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

इस फिडल देखें: http://jsfiddle.net/d7kXX/

लेकिन स्पष्ट रूप से आप उसे जहां आप चाहते हैं कर सकते हैं। यदि आप इसे पूरी तरह से चाहते हैं, तो इसे आजमाएं:
http://jsfiddle.net/6cME7/

FYI, यदि आप आकार बदलते हैं तो यह बैज आकार को तोड़ देता है। मुझे लगता है कि यह एक सामान्य विचार देता है लेकिन मुझे लगता है कि यह पूरी तरह से कार्यात्मक नहीं है।

Answer 2

हार्ड क्या आप अपने कोड देखा बिना वास्तव में चाहते हैं बताने के लिए, लेकिन मैं इसे एक शॉट वैसे भी दिया:

एचटीएमएल

<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> 

सीएसएस

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

मैं पूर्ण स्थिति का उपयोग करना पसंद जब चीज को नीचे और/या दाएं से संबंधित गठबंधन किया जाना चाहिए, क्योंकि यह सबसे आसान और सबसे विश्वसनीय विधि इमो है।

एक डेमो: http://www.bootply.com/suRioyheqL