用于Bootstrap v3.3.7的Pill徽章

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

如果这样的类在bootstrap中不可用，你可以重新创建一个增加border-radius的类似的类

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

你可以创建一个新的css类：

.label-primary{
   border-radius: 1em;
   padding: 1em;
}