Twitter Bootstrap V 3.0 dynamically centering navigation - html

Question

Using bootstrap v3.0
Id like to dynamically center the navigation bar. i.e. A fix that doesnt hardcode a width.
How is this achieved? Below is a sample of the standard navigation code with excess tags removed.
<!-- NAVBAR
================================================== -->
<div class="navbar-wrapper">
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">All Saints Church, Ripley.</a>
</div>
<div class="navbar-collapse collapse" >
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</div>
<!-- ./NAVBAR -->
The documentation states to float the navbar right insert .navbar-right #<ul class="nav navbar-nav navbar-right"> ... shown here http://getbootstrap.com/components/#navbar-component-alignment.
Having followed the methodology of this question: twitter bootstrap -- center brand in nav bar I cannot centralize the navigation using margin-left: auto; and margin-right: auto;
Any help is greatly appreciated.

Answer 1

For the record, I don't quite like this solution =) But a brute force way may be to add the following CSS:
.nav.navbar-nav {
float: none;
margin-left: auto;
margin-right: auto;
}
and the following jQuery to force the width down from the auto that is being inherited from .container:
var width = 0, $navbarLinks = $(".nav.navbar-nav");
$navbarLinks.children().each( function(idx) {
width += $(this).outerWidth();
});
$navbarLinks.width(width);
See the jsFiddle for testing.

Answer 2

I have found it easiest to use the nav-justified class for this purpose..
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav nav-justified">
<li class="active">Home</li>
<li>Projects</li>
<li>Services</li>
<li>Downloads</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</nav>
Demo
You can also constrain the width using an extra class. See the 2nd navbar in the demo.