Bootstrap v3 导航对齐宽度实际上不相等

Question

引用http://www.w3schools.com/bootstrap/bootstrap_ref_comp_navs.asp

.nav-justified 使导航选项卡/药丸的宽度与其父级相同，屏幕宽度超过 768 像素。在较小的屏幕上，导航选项卡/药丸是堆叠的

我认为导航对齐的<ul> 内的每个<li> 元素应该具有相同的宽度。 然而，情况似乎并非如此，因为药丸宽度会拉伸以适应包含的文本，至少在这个例子中：http://www.bootply.com/0pEQ2iml8q#（在 chrome 46 上）

药丸的宽度都不一样，似乎没有道理。

我错过了什么？

Answer 1

366 天后，我偶然发现了或多或少相同的问题。我对导航药丸内的图片有疑问，最后的药丸在高度和宽度上都比我包含的其他两种药丸小。

我也注意到文本是最后一个药丸大小的罪魁祸首，但是最长的文本在第一个药丸中，这让我感到困惑，因为这是完美的尺寸。 （可能是由于药丸在容器行和列内格式化）

我通过简单地实现这个问题的答案解决了我的问题：Same height for nav tabs

虽然请注意，但我发现当调整到 xs 大小时，这会删除药丸的“堆叠”功能。像这样将 css 放入媒体查询中，一切都应该没问题：

@media screen and (min-width: 480px) {
.nav-pills{
    display: flex;
}
.nav-pills li {
    display: flex;
    flex: 1;
}

.nav-pills li  a {
    flex: 1;
}
}