CSS 如何在引导程序中“媒体”的右下角放置徽章？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17617660/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to place a badge in lower right corner of a "media" in bootstrap?
提问by MojoDK
回答by Brewal
With such a markup :
有了这样的标记：
<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>
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 :
你的徽章在图片的右下角，但在下面。如果您希望它稍微超出图像，请添加以下 css ：
.media img+span.badge {
position: relative;
top: -8px;
left: 8px;
}
See this Fiddle : http://jsfiddle.net/d7kXX/
看到这个小提琴：http: //jsfiddle.net/d7kXX/
But obviously you can place it wherever you want. If you want it entierly over, try this :
http://jsfiddle.net/6cME7/
但显然你可以把它放在任何你想要的地方。如果你想彻底结束，试试这个：http:
//jsfiddle.net/6cME7/
FYI, If you resize it breaks the badge size. I guess it gives a general idea but i think it is not fully functionnal.
仅供参考，如果您调整其大小会破坏徽章大小。我想它给出了一个大致的想法，但我认为它并不完全正常。
回答by Pevara
Hard to tell what you want exactly without having seen your code, but I gave it a shot anyway:
在没有看过你的代码的情况下很难说出你想要什么，但我还是试了一下：
HTML
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
CSS
.relative {
position: relative;
}
.label.bottom-right {
position: absolute;
right: 2px;
bottom: 2px;
}
I prefer using absolute positioning when thing have to be aligned relative to the bottom and/or right, as it is the easiest and most reliable method imo.
当事物必须相对于底部和/或右侧对齐时，我更喜欢使用绝对定位，因为它是最简单和最可靠的方法imo。
