Question

使用Bootstrap 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>

你的徽章位于图片的右下角，但是在。如果您希望它稍微超过图像，请添加此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

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

2 个答案: