css - 拆分 Twitter Bootstrap 标签

标签 css twitter-bootstrap tags label padding

我正在使用 bootstrap 的标签来显示我的博客的标签。我想做的是将标签“拆分”为两部分:

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

这可能并不容易和棘手,因为 Bootstrap 为每个标签定义了所有填充。
例如,更改第二部分文本背景的简单解决方案将不起作用,因为它只会扩展到不考虑填充的字符串长度。

您可以在下面找到我想要完成的任务的视觉帮助。

label

所以基本上我需要处理以下跨度标签。

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

最佳答案

尝试:

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

当心:这很黑客......

关于css - 拆分 Twitter Bootstrap 标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15406690/

相关文章:

html - 移除 CSS Grid 中的 "Align-items"空间

html - `display:inline-block` 元素上的奇怪边距

css - JavaFX:标签上某些字体的奇怪偏移

javascript - 如何使用 Bootstrap 错误消息而不是 Javascript 警报?

css - 如何知道 Twitter Bootstrap 处于哪种状态/格式?

css - 如何使用 CSS 更改仅包含在 <div> 标签中的文本的颜色?

html - Datepicker 在 <th> 元素内不工作

php - 如何在mysql中使用存储过程获取问题及其相关标签?

html - 删除 HTML 标签中的注释

svn - 使用 Bamboo 进行 Subversion 标记失败