如何在Bootstrap中创建带有关闭图标的Label？

Question

使用Bootstrap 3，获得带有关闭图标的带边框标签的好方法是什么？ Stack Overflow的一个例子：

Answer 1

我最终得到http://jsfiddle.net/7zkCU/30/（改编自http://maxwells.github.io/bootstrap-tags.html）：

<span class="tag label label-info">
  <span>Example Tag</span>
  <a><i class="remove glyphicon glyphicon-remove-sign glyphicon-white"></i></a> 
</span>

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

Answer 2

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

我略微修改了CSS，只是标签更加响应。修改后的CSS解决了两个问题：

1. 标签现在将为较小的视口进行垂直包装和堆叠。
2. 如果标签比父容器宽，则以前标签会超出父容器。如果标签太宽则标签会缩小，并且当标签太长时标签末尾会显示省略号（...）。

这是修改后的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;
}

Answer 3

您正在寻找Bootstrap glyphicons（组件）：http://getbootstrap.com/components/#glyphicons

它们旨在与各种其他元素配合使用，并且易于使用。这是文档中的一个示例：

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

也可以是标签，段落或类似物。

Answer 4

使用Bootstrap 4可以做到

<span class="badge badge-primary">
  Dismissable badge
  <button type="button" class="close" aria-label="Dismiss">
    <span aria-hidden="true">&times;</span>
  </button>
</span>

和

.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;
  }
}

它意识到它是PR https://github.com/twbs/bootstrap/pull/26823，但仍未在master中合并（延迟到v5）。

演示：https://codepen.io/gijsbotje/pen/OjOmby