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

使用引导程序media功能，如何将badge放置在媒体块图像的右下方（使其位于图像顶部）？如何在引导程序中将徽章放置在“媒体”的右下角？

2013-07-12 MojoDK

你能不能告诉我们，你已经相关的代码？这将有助于能够从某些事情开始，以便我们可以修改现有的代码。 –

您是否曾尝试在徽章中添加“拉右”类？你的html是什么？ – Brewal

...更好还是一个http://jsfiddle.net/ – Tanner

有了这样的标记：

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

如果你调整大小它打破了徽章的大小。我想它给出了一个大概的想法，但我认为它不是完全的功能。

来源

2013-07-12 14:56:55 Brewal

正如你可能可以弄清楚，CSS不是我强大的一面:)非常感谢你帮助我！ :) – MojoDK

这并不理想 - 徽章“有”的图像下方仍有一点空间。 PeterVR的回答是最好的解决方案 – Bojangles

@Bojangles是的，你是对的。 – Brewal

很难告诉你，你究竟是什么，却看不到你的代码，但我无论如何给了它一个镜头：

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

来源

2013-07-12 15:05:43 Pevara

比'position：relative'好得多。应该是IMO接受的答案 – Bojangles

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

回答

相关问题