Question

如何在图片的右下角放置一个Bootstrap badge？

我发现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 {
   /*?*/
}

Answer 1

CSS：

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

HTML：

D d; d++

现在您必须根据您的要求定位徽章。

Answer 2

你可以尝试这个：

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

How to create a Google Calendar event without a reminder / How to get Service Accounts to impersonate users

Answer 3

这个问题有很多观点，所以我想我会回来并提供我最终解决这个问题的方法：

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

如何在引导程序中将img的右下角放置徽章？

3 个答案: