如何使用Bootstrap中的關閉圖標創建標籤？

Question

使用Bootstrap 3，有什麼可能是一個很好的方式來獲得帶有密切圖標的邊界標籤？諸如此類的事情，從堆棧溢出的一個例子：

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

引導glyphicons（組件）是你在找什麼：http://getbootstrap.com/components/#glyphicons

他們設計的範圍廣泛的其他工作元素和易於使用。這是來自文檔的示例：

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

也可能是標籤，段落或類似內容。

Answer 3

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