在Bootstrap 3中制作圆形背景

Question

我有一些问题要在元素内部制作圆形颜色，看起来像这样

这是我现在拥有的Bootstrap 3代码

<div class="row">
    <div class="col-md-6 pull-left" itemscope itemtype="http://schema.org/logo">   
        <img class="img-responsive" src="http://placehold.it/350x150" alt="">    
    </div>
    <div class="col-md-6">
        <p>Total Job Position Available <span class="badge pull-right">8</span>
        </p>    
    </div>
</div>

我在徽章中遇到的问题，如何制作这样的问题并调整“可用的总工作岗位”？

Answer 1

首先，我没有权限发表评论。 您可以在div中使用.img-circle类，并根据需要定义css背景颜色和宽度，然后根据需要定义高度。

<div class="img-circle" style="background-color: red; width: 20px; text-align: center;">8</div>

Answer 2

您可以在彩色圆圈周围使用带有透明像素的.png图片。它也可以使用CSS技巧（另见How to make circular background using css?）。

至于对齐方式，您需要在vertical-align _{上将middle CSS属性设置为span.badge（ 应该像这样工作，但是vertical-align可以给出意想不到的行为imo）}