Html 引导徽章不'；大小合适

这是一张照片：

徽章以特定宽度从列表组项div中移出

嗯？我似乎找不到任何关于这个的文件。。。我哪里出错了？看起来很简单在

Bootply/HTML：

---

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

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

---

应用以下CSS：

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

---

看起来像是一个浮动问题。我希望有一个引导解决方案，而不是围绕引导的CSS。无法帮助，因为我不使用引导。但在我看来，在这样的宽度下，你无论如何都会想要重新流化你的布局——这么瘦的列是糟糕的用户体验。引导是否可以切换此特定宽度的布局（使用媒体查询）？是。我现在已经做到了。但是这些行有时会有很长的字符串，所以如果徽章没有正确包装，就太糟糕了。不要害怕加入你自己的CSS。进入你的内脏。框架不能解决所有的用例。哈哈。我更喜欢构建自己的CSS。然后我花时间构建一个框架。