Bootstrap徽章的大小不合适

Question

这是一张图片：

徽章以特定宽度离开列表组项目div。

咦？我似乎无法找到有关此事的任何记录......我哪里出错了？看起来很简单http://getbootstrap.com/components/#list-group ...

Bootply / HTML： http://www.bootply.com/thVD0WpzIP

Answer 1

您遇到的问题是由于您的徽章已浮动。当宽度缩小到足以使徽章跨度陷入锚文本时，它会被推到下面。如果您移除浮动并将其换成绝对位置，并在右侧为锚点添加一些额外的填充，则可以解决此问题。绝对定位的徽章将始终保持其容器元素右侧的n个像素（在下面的示例中，这将是10px）。包含锚点右侧的额外填充是为了防止锚文本在标记中消失。

.list-group-item {
    padding: 10px 20px 10px 10px;
}
.list-group-item > .badge {
    float: none;
    position: absolute;
    right: 10px;
}

Answer 2

应用以下CSS：

div.list-group a{padding-right : 50px;}
div.list-group span.badge {position : absolute; right : 10px; top: 13px;}