如何在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的右下角？

回答

相关问题