分割Twitter Bootstrap标签

Question

我正在使用引导程序的标签来显示我博客的标签。我想做的是将标签分为两部分：

1. BG1颜色的第一部分包含标签字符串
2. 具有BG2颜色的第二部分包含标签计数

由于引导程序为每个标签定义了所有填充，所以这可能并不容易且棘手。例如，更改第二部分文本背景的简单解决方案将不起作用，因为它只会扩展到字符串的长度，而不考虑填充。在下面，您可以找到我想完成的视觉帮助。

因此，基本上，我需要处理以下span标签。

<li>
    <a class="label label-info" href="">
        <i class="icon-tag icon-white"></i> 
        another tag
        <span class="tagCountInfo">4</span>
    </a>
</li>

Answer 1

尝试：

<li>
    <a class="label label-info" href="">
        <i class="icon-tag icon-white"></i>
        tagName
        <span class="count">4</span>
    </a>
</li>

with

.count {
    background-color: #000000;
    border-radius: 0 3px 3px 0;
    margin-right: -4px;
    padding: 2px 4px 3px;
}

当心：它很hacky ...

Answer 2

关于结合两个彩色徽章，我发现仅将现有的引导程序类用于徽章，然后仅修改匹配角上的边界半径对我来说是可行的。

<span class="badge-container">
    <span class="badge-1">Another Tag</span>
    <span class="badge-2">4</span>
</span>

CSS（需要使用字体大小0来消除跨度之间的间隙）

.badge-container {
    font-size: 0;
    .badge-1 {
        border-radius: 10px 0px 0px 10px;
    }
    .badge-2 {
        border-radius: 0px 10px 10px 0px;
    }
}