Как разместить значок в нижнем правом углу img в бутстрапе?

Как разместить загрузочный лоток badge в правом нижнем углу изображения?Как разместить значок в нижнем правом углу img в бутстрапе?

Я нашел this related question для размещения значков начальной загрузки в углу мультимедийных изображений, но не смог преобразовать их, чтобы заставить его работать без мультимедийного изображения.

EDIT: Извинения за недостаток деталей. Вот пример с 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 { border: 1px solid #ccc; позиция: относительная; Право: -20px; верх: 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>

Нет w вы должны разместить значок в соответствии с вашими требованиями.

источник

2015-09-28 05:27:40 Batman

Возможно, было бы проще установить расстояние, используя 'bottom' и' right', а не 'top' и' left' в этом случае. – Eraph

да, возможно. это соответствует моему изображению. Вы можете позиционировать свое изображение в соответствии с вашим требованием. – Batman

Вы можете попробовать это:

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

DEMO PAGE

источник

2015-09-28 05:28:31

Я пытаюсь сделать это на изображении мультимедийного класса. – 43Tesseracts

ok wait sir @ 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

Как разместить значок в нижнем правом углу img в бутстрапе?

ответ

Смежные вопросы