如何在引导程序选项卡中添加关闭图标？

Question

我想在引导选项卡中添加一个关闭图标,然后我可以通过单击图标关闭选项卡.

我尝试下面,但"X"显示不与标题标题在同一行.

.close {
    font-size: 20px;
    font-weight: bold;
    line-height: 18px;
    color: #000000;
    text-shadow: 0 1px 0 #ffffff;
    opacity: 0.2;
    filter: alpha(opacity=20);
    text-decoration: none;
    display:inline;
}
.close:hover {
    display:inline;
    color: #000000;
    text-decoration: none;
    opacity: 0.4;
    filter: alpha(opacity=40);
    cursor: pointer;
}

<a id="user-list-tab-li" style="display:inline;" href="#user-list-tab-pane">The tab</a> 
<span class="close">×</span>

Answer 1

工作小提琴就在这里

 function registerCloseEvent() {

$(".closeTab").click(function () {

    //there are multiple elements which has .closeTab icon so close the tab whose close icon is clicked
    var tabContentId = $(this).parent().attr("href");
    $(this).parent().parent().remove(); //remove li of tab
    $('#myTab a:last').tab('show'); // Select first tab
    $(tabContentId).remove(); //remove respective tab content

});
 }

Answer 2

尝试将span-tag放在a-tag中:

<a id="user-list-tab-li" style="display:inline;" href="#user-list-tab-pane">The tab<span class="close">×</span></a> 

如果你使用bootstrap包含这样的图标:

<i class="icon-remove"></i>