I'm using a bootstrap navbar which contains 3 elements.
I want it to be distributed across the whole navbar, but it doesn't.

Here is the code:

<div class="navbar steps" style="position:relative;z-index:7">
    <div class="navbar-inner">
        <ul class="row-fluid nav nav-pills">
            <li class="span3 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="span3">
                <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="span3">
                <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>

Bootstrap grids are built off a 12 column layout. If you want three items to take up the whole width, use <code>span<b>4</b></code> (=12/<b>3</b>).

Try changing span3 to span4.

Here's a Demo in jsFiddle

Which should look like this:

Code:

<!-- language: lang-html --> <pre><code>&lt;div class=&quot;navbar steps&quot; style=&quot;position:relative;z-index:7&quot;&gt; &lt;div class=&quot;navbar-inner&quot;&gt; &lt;ul class=&quot;row-fluid nav nav-pills&quot;&gt; &lt;li class=&quot;<b>span4</b> active&quot;&gt; &lt;a href=&quot;#tab1&quot; data-toggle=&quot;tab&quot; class=&quot;step active&quot;&gt; &lt;span class=&quot;number&quot;&gt;1&lt;/span&gt; &lt;span class=&quot;desc&quot;&gt; &lt;i class=&quot;icon-ok&quot;&gt;&lt;/i&gt; Source &lt;/span&gt; &lt;/a&gt; &lt;/li&gt; &lt;li class=&quot;<b>span4</b>&quot;&gt; &lt;a href=&quot;#tab2&quot; data-toggle=&quot;tab&quot; class=&quot;step&quot;&gt; &lt;span class=&quot;number&quot;&gt;2&lt;/span&gt; &lt;span class=&quot;desc&quot;&gt; &lt;i class=&quot;icon-ok&quot;&gt;&lt;/i&gt; D&eacute;tail &lt;/span&gt; &lt;/a&gt; &lt;/li&gt; &lt;li class=&quot;<b>span4</b>&quot;&gt; &lt;a href=&quot;#tab3&quot; data-toggle=&quot;tab&quot; class=&quot;step&quot;&gt; &lt;span class=&quot;number&quot;&gt;3&lt;/span&gt; &lt;span class=&quot;desc&quot;&gt; &lt;i class=&quot;icon-cog&quot;&gt;&lt;/i&gt; Configuration &lt;/span&gt; &lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; </code></pre>

---

Option 2

As fasouto pointed out, you can also try using a justified navbar.

Here's a Justified Demo