html - Bootstrap 徽章尺寸不正确

Question

这是一张图片:

徽章以特定宽度超出列表组元素 div。

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

Bootstrap/HTML: http://www.bootply.com/thVD0WpzIP

Answer 1

您遇到的问题是因为您的徽章是 float 的。当宽度缩小到足以使徽章跨度碰到 anchor 文本时，它就会被推到下面。如果你移除 float 并将其交换为绝对位置，并在右侧给你的 anchor 一些额外的填充，你可以解决这个问题。绝对定位的徽章将始终保持距离其容器元素右侧 n 个像素(在我下面的示例中，即 10 像素)。包含 anchor 右侧的额外填充是为了防止 anchor 文本挤入徽章。

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