Bootstrap v3 nav-justified witdh实际上并不相同

Question

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

  

.nav-justified使导航标签/药片的宽度等于其父级宽度，屏幕宽度超过768px。在较小的屏幕上，导航标签/药片堆叠

我认为导航对齐<li>内的每个<ul>元素都应该具有相同的宽度。 然而，这似乎并非如此，因为药片宽度可以延伸以容纳所包含的文本，至少在此示例中是这样的：http://www.bootply.com/0pEQ2iml8q#（在chrome 46上）

药丸都有不同的宽度，似乎没有理由。

我在那里错过了什么？

Answer 1

366天后，我偶然发现了同样的问题。我对导航丸内的图片有一个问题，最终药丸的高度和宽度都比我包括的其他两个药丸要小。

我也注意到文本是最后一颗药丸大小的罪魁祸首，然而最长的文字出现在第一个药丸中，这让我很困惑，因为这是完美的大小。 （可能是因为药片在容器行和列中被格式化）

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

虽然请注意，我发现这会删除＆＃39;堆叠＆＃39;调整大小到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;
}
}