如何将徽章放置在“媒体”的右下角，在bootstrap？ [英] How to place a badge in lower right corner of a "media" in bootstrap?

问题描述

使用引导媒体功能，如何放置徽章（因此位于图片顶部） ）

Using the Bootstrap media feature, how can I place a badge in the lower right of the media block's image (so it's on top of the image)?

推荐答案

有了这样的标记：

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

You have your badge at the bottom right of the image, but under. If you want it to be a bit over the image, add this css :

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

查看此小提琴： http://jsfiddle.net/d7kXX/

但显然你可以把它放在任何你想要的地方。如果你想要它结束，请尝试这：

http://jsfiddle.net/6cME7/

But obviously you can place it wherever you want. If you want it entierly over, try this :
http://jsfiddle.net/6cME7/

FYI，如果调整大小会破坏徽章大小。我想它给了一个一般的想法，但我认为它不是完全正式。

FYI, If you resize it breaks the badge size. I guess it gives a general idea but i think it is not fully functionnal.

这篇关于如何将徽章放置在“媒体”的右下角，在bootstrap？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！