如何在引導程序中將徽章放置在「媒體」的右下角？

使用引導程序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

如何在引導程序中將徽章放置在「媒體」的右下角？

回答

相關問題