Bootstrap v3 nav-justified witdh not actually equal

Question

Quoting from http://www.w3schools.com/bootstrap/bootstrap_ref_comp_navs.asp

.nav-justified Makes navigation tabs/pills equal widths of their parent, at screens wider than 768px. On smaller screens, the nav tabs/pills are stacked

I reckon that each <li> element inside the nav-justified <ul> should have the same width. However this seem to not be the case as pills widths stretch to accomodate the contained text, at least in this example: http://www.bootply.com/0pEQ2iml8q# (on chrome 46)

The pills all have different widths, and there seems to be no justification.

What am I missing there?

Answer 1

366 days later and I stumble upon more or less the same issue. I had an issue with the pictures inside the nav-pills, the end pill being smaller in both height and width than the other two pills I included.

I noticed too that the text was the culprit of the last pill's size, however the longest text was in the first pill which confused me as this was perfect size. (maybe due to the pills being formatted inside containers rows and columns)

I fixed my issue by simply implementing the answer in this question : Same height for nav tabs

Though do note, I found this removes the 'stacking' functionality of the pills when resized down to xs. Chuck the css into a Media Query like so, and all should be fine:

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

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