拆分 Twitter Bootstrap 标签答案

【问题标题】：Split a Twitter Bootstrap label拆分 Twitter Bootstrap 标签
【发布时间】：2013-03-02 15:35:27
【问题描述】：

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

BG1 颜色的第一部分包含标签字符串
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>

【问题讨论】：

你可以添加任何你已经拥有的html和css
完成，对于 CSS，我没有修改或在原始 bootstrap.css 中添加任何内容。
我已将代码编辑得更具体。
你能改变html吗？
@Pete 是的，当然，我可以随意更改 html，代码只是一个示例，不是最终版本。

标签： css twitter-bootstrap tags label padding

【解决方案1】：

关于加入两个彩色徽章/标签，我发现只使用现有的引导类作为徽章，然后只修改匹配角上的边框半径对我有用。

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

【讨论】：

【解决方案2】：

试试：

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

与

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

当心：它很hacky...

【讨论】：