Twitter bootstrap 3 如何在引导中创建带有关闭图标的标签？

使用Bootstrap3，有什么好方法可以获得带有闭合图标的带边框标签？堆栈溢出的一个例子：

引导图示符图标（组件）是您需要的：

它们被设计用于与广泛的其他元素协同工作，并且易于使用。这是文档中的一个示例：

<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-star"></span> Star
</button>

明星

也可以是标签、段落或类似内容。

我最后得到了（改编自）：

---

@user3364825-感谢您发布解决方案！这是一个显示搜索过滤器标签的简单而优雅的解决方案

我稍微修改了CSS，只是为了让标签更具响应性。修改后的CSS解决了两个问题：

对于较小的视口，标记现在将垂直包裹和堆叠

如果标记比父容器宽，则以前的标记将扩展到父容器之外。如果标签太宽，标签将缩小，如果标签太长，标签将在标题末尾显示省略号（…） 以下是修改后的CSS：

.tag {
  font-size: 12px;
  padding: 0.3em 0.4em 0.3em;
  margin: 2px 1px !important;
  display: inline-block;
  max-width: 100%;
}

.tag > span {
  display: inline-block;
  max-width: 94%;
  white-space: nowrap;
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
}

.tag a {
  display: inline-block;
  color: #bbb;
  cursor: pointer;
  opacity: 0.6;
  margin: 0 0 0 0.3em;
}

.tag a:hover {
  opacity: 1.0;
}

.tag a .glyphicon-white {
  color: #fff;
  margin-bottom: 2px;
}

.tag .remove {
  vertical-align: bottom;
  top: 0;
}

---

使用Bootstrap 4，可以使用

可撤销徽章
&时代；

及

它实现了PR，但仍然没有合并到master中（延迟到v5）

---

演示：

@davidkonrad——谢谢，这让我看到了Bootstrap标签项目（我发现一个稍微接近我想要的，发布在下面），这也是Bootstrap 3的一个好方法（css转换为更少）。

.tag {
  font-size: 14px;
  padding: .3em .4em .4em;
  margin: 0 .1em;
}
.tag a {
  color: #bbb;
  cursor: pointer;
  opacity: 0.6;
}
.tag a:hover {
  opacity: 1.0
}
.tag .remove {
  vertical-align: bottom;
  top: 0;
}
.tag a {
  margin: 0 0 0 .3em;
}
.tag a .glyphicon-white {
  color: #fff;
  margin-bottom: 2px;
}

.tag {
  font-size: 12px;
  padding: 0.3em 0.4em 0.3em;
  margin: 2px 1px !important;
  display: inline-block;
  max-width: 100%;
}

.tag > span {
  display: inline-block;
  max-width: 94%;
  white-space: nowrap;
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
}

.tag a {
  display: inline-block;
  color: #bbb;
  cursor: pointer;
  opacity: 0.6;
  margin: 0 0 0 0.3em;
}

.tag a:hover {
  opacity: 1.0;
}

.tag a .glyphicon-white {
  color: #fff;
  margin-bottom: 2px;
}

.tag .remove {
  vertical-align: bottom;
  top: 0;
}

.badge {
  .close {
    padding-right: $badge-padding-x;
    padding-left: $badge-padding-x;
    margin-right: -$badge-padding-x;
    font-size: inherit;
    color: inherit;
    text-shadow: none;
  }
}