如何在引导程序中的"媒体"的右下角放置徽章？

Question

使用Bootstrap 媒体功能,如何在媒体块图像的右下方放置徽章(因此它位于图像顶部)？

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>

你的徽章位于图片的右下角,但是在.如果你想让它略微超过图像,添加这个css:

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

看到这个小提琴:http://jsfiddle.net/d7kXX/

但显然你可以把它放在任何你想要的地方.如果你想要它,请试试这个:http:
//jsfiddle.net/6cME7/

仅供参考,如果您调整大小,则会打破徽章大小.我想它给出了一个大致的想法,但我认为它不是完全正常的.

Answer 2

没有看到你的代码很难说清楚你想要什么,但我还是试了一下:

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

当物体必须相对于底部和/或右边对齐时,我更喜欢使用绝对定位,因为它是最简单和最可靠的方法.

演示:http://www.bootply.com/suRioyheqL