How do I center these Twitter bootstrap 3 navbar links?

Question

I'm wondering on how I can center the bootstrap 3's navbar menu items. I know they have included a .nav-justified class but that will just conflict with navbar-nav if used together. I belive it is being looked into by the dev team.

So is there any work around with CSS that I can achieve a navbar that will keep the navbar menu items/links justified even when the container it is in is re-sized.

Here's a Jsfiddle for you if you need it.

Solution 1

The .nav-justifed class is to be used with nav-tabs / nav-pills (see bootstrap docs) and not nav-bar. The two concepts are very different and should not be confused.

However, you can achieve the effect you are looking for by adding the following css:

.navbar-nav.nav-justified > li{
    float:none;
}

nav-justifiednow plays nice with navbar-nav:

<ul class="nav navbar-nav nav-justified">

See updated jsFiddle.

Solution 2

If using LESS, you can do the following:

.navbar-nav {
  .nav-justified;
}