number of items in bootsrap navbar

Question

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>

Answer 1

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.

Here's a Justified Demo