Bootstrap grids are built off a 12 column layout. If you want three items to take up the whole width, use span4
(=12/3).
Try changing span3
to span4
.
Here's a Demo in jsFiddle
Which should look like this:
Code:
<div class="navbar steps" style="position:relative;z-index:7">
<div class="navbar-inner">
<ul class="row-fluid nav nav-pills">
<li class="span4 active">
<a href="#tab1" data-toggle="tab" class="step active">
<span class="number">1</span>
<span class="desc">
<i class="icon-ok"></i>
Source
</span>
</a>
</li>
<li class="span4">
<a href="#tab2" data-toggle="tab" class="step">
<span class="number">2</span>
<span class="desc">
<i class="icon-ok"></i>
Détail
</span>
</a>
</li>
<li class="span4">
<a href="#tab3" data-toggle="tab" class="step">
<span class="number">3</span>
<span class="desc">
<i class="icon-cog"></i>
Configuration
</span>
</a>
</li>
</ul>
</div>
</div>
Option 2
As fasouto pointed out, you can also try using a justified navbar.