Bootstrap v3.3.7 的药丸徽章

Question

有没有办法为 Bootstrap v3.3.7 应用 Pill 徽章？

与我们在 Bootstrap 4 上使用的类类似 .badge-pill。

https://v4-alpha.getbootstrap.com/components/badge/

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div>
<span class="label label-primary">close x </span>
</div>

Answer 1

如果引导程序中没有此类，您可以重新创建一个类似的类，增加边框半径

.label.badge-pill {
border-radius:1em;
margin:0 0.25em;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div>

<span class="label label-default badge-pill">default </span>

<span class="label label-primary badge-pill">primary </span>

<span class="label label-success badge-pill">success</span>

<span class="label label-info badge-pill">info </span>

<span class="label label-warning badge-pill">warning </span>

<span class="label label-danger badge-pill">danger </span>
</div>