Bootstrap navbar grid system for unordered list - twitter-bootstrap-3

Question

Can anyone help me please how to make the unordered list display in grid widths ?
<div class="navbar" role="navigation">
<div class="container">
<div class="row">
<div class="navbar-header col-md-4">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#topmenu">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a rel="home" class="logo" href="{$baseUri}">
<img src="img/layout/portfolio-2014-logo.png" alt="" class="img-responsive logo" />
</a>
</div>
<div class="navbar-collapse collapse" id="topmenu">
<ul class="nav navbar-nav">
<li class="active">blog</li>
<li class="col-md-2">works</li>
<li class="col-md-2">about</li>
<li class="col-md-2">contact</li>
</ul>
</div>
</div>
</div>
<div class="container">
<hr>
</div>
</div>
I've tried something like this but it is not workiing :/

Answer 1

Well that's not part of default Bootstrap in the navbar because navbar-nav does it's own width based on the width of the text and the padding, but you can just remove the navbar-nav and just use nav:
DEMO: http://jsbin.com/kiyiye/1/
<ul class="nav">
And it will work with col-*-classes but you'll need to likely address the smaller viewport margins and such. Get intimately familiar with Bootstrap's css if you decide to use something never demonstrated in their docs.