css - 如何在引导程序中将徽章放在“媒体”的右下角？

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

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

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