如何在bootstrap中將img放在img的右下角？

如何在圖像的右下角放置Bootstrap badge？如何在bootstrap中將img放在img的右下角？

我發現this related question將引導徽章放置在媒體圖像的角落，但無法將其轉換爲在沒有非媒體圖像的情況下工作。

編輯：對缺乏細節的道歉。這是一個fiddle的例子。

我的目標是讓圖像在彼此相鄰的同一行上，以及圖像右下角的徽章。

例子：

<div class="image_with_badge_container"> 
    <img src="http://placehold.it/64x64" /> 
    <span class="badge img-badge">2</span> 
</div> 
<div class="image_with_badge_container"> 
    <img src="http://placehold.it/64x64" /> 
    <span class="badge img-badge">4</span> 
</div> 
<div class="image_with_badge_container"> 
    <img src="http://placehold.it/64x64" /> 
    <span class="badge img-badge">5</span> 
</div>

CSS：

.image_with_badge_container { 
    /*?*/ 
} 

.img-badge { 
    /*?*/ 
}

來源

2015-09-28 43Tesseracts

你能提供代碼或者您想要放置徽章 –

的示例，您需要自定義CSS .btn .badge {0} {0} {0} {0} border：1px solid #ccc; 位置：相對; right：-20px; top：15px; } –

@kindly通過提琴提供代碼將有助於解決您的問題 – Mahadevan

CSS：

img { 
    position: relative; 
} 

span { 
    position: absolute; 

    top: 40%; 
    left: 40%; 
}

HTML：

<img src="resources/images/Computer-lockup.png"> 
<span class="badge">4</span>

無您必須根據您的要求放置徽章。

來源

2015-09-28 05:27:40 Batman

在這種情況下，使用'bottom'和'right'而不是'top'和'left'來設置距離可能會更容易 – Eraph

是的，它有可能。它根據我的image.you可能會根據您的要求來定位您的圖像 – Batman

你可以試試這個：

.image_with_badge_container img+span.badge { 
    position: relative; 
    top: 20px; 
    left: -28px; 
}

DEMO PAGE

來源

2015-09-28 05:28:31

我正在嘗試在非媒體類圖像上做到這一點 – 43Tesseracts

好的等待先生@ 43Tesseracts –

現在你可以看到Sir @ 43Tesseracts –

這個問題有很多意見，所以我想我會回來，我提供如何最終解決這個問題：

.image_with_badge_container { 
 
    display: inline-block; /* keeps the img with the badge if the img is forced to a new line */ 
 
    position: relative; 
 
    margin-bottom: 5px; 
 
} 
 

 
.badge-on-image { 
 
    position: absolute; 
 
    bottom: 2px; /* position where you want it */ 
 
    left: 2px; 
 
    padding: 3px 6px; 
 
}

<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet"/> 
 
<div class="image_with_badge_container"> 
 
    <img src="http://placehold.it/64x64" /> 
 
    <span class="badge badge-on-image">7</span> 
 
</div> 
 
<div class="image_with_badge_container"> 
 
    <img src="http://placehold.it/64x64" /> 
 
    <span class="badge badge-on-image">2</span> 
 
</div> 
 
<div class="image_with_badge_container"> 
 
    <img src="http://placehold.it/64x64" /> 
 
    <span class="badge badge-on-image">3</span> 
 
</div> 
 
<div class="image_with_badge_container"> 
 
    <img src="http://placehold.it/64x64" /> 
 
    <span class="badge badge-on-image">7</span> 
 
</div> 
 
<div class="image_with_badge_container"> 
 
    <img src="http://placehold.it/64x64" /> 
 
    <span class="badge badge-on-image">2</span> 
 
</div> 
 
<div class="image_with_badge_container"> 
 
    <img src="http://placehold.it/64x64" /> 
 
    <span class="badge badge-on-image">3</span> 
 
</div> 
 
<div class="image_with_badge_container"> 
 
    <img src="http://placehold.it/64x64" /> 
 
    <span class="badge badge-on-image">7</span> 
 
</div> 
 
<div class="image_with_badge_container"> 
 
    <img src="http://placehold.it/64x64" /> 
 
    <span class="badge badge-on-image">2</span> 
 
</div> 
 
<div class="image_with_badge_container"> 
 
    <img src="http://placehold.it/64x64" /> 
 
    <span class="badge badge-on-image">3</span> 
 
</div> 
 
<div class="image_with_badge_container"> 
 
    <img src="http://placehold.it/64x64" /> 
 
    <span class="badge badge-on-image">7</span> 
 
</div> 
 
<div class="image_with_badge_container"> 
 
    <img src="http://placehold.it/64x64" /> 
 
    <span class="badge badge-on-image">2</span> 
 
</div> 
 
<div class="image_with_badge_container"> 
 
    <img src="http://placehold.it/64x64" /> 
 
    <span class="badge badge-on-image">3</span> 
 
</div> 
 
<div class="image_with_badge_container"> 
 
    <img src="http://placehold.it/64x64" /> 
 
    <span class="badge badge-on-image">7</span> 
 
</div> 
 
<div class="image_with_badge_container"> 
 
    <img src="http://placehold.it/64x64" /> 
 
    <span class="badge badge-on-image">2</span> 
 
</div> 
 
<div class="image_with_badge_container"> 
 
    <img src="http://placehold.it/64x64" /> 
 
    <span class="badge badge-on-image">3</span> 
 
</div>

來源

2017-02-28 00:24:36 43Tesseracts

如何在bootstrap中將img放在img的右下角？

回答

相關問題