Количество элементов в bootsrap navbar

Question

Я использую bootstrap navbar, который содержит 3 элемента.
Я хочу, чтобы он был распределен по всему навигатору, но это не так.

Вот код:

<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 построены от макета на 12 столбцов. Если вы хотите, чтобы три предмета занимали всю ширину, используйте span4 (= 12/).

Попробуйте изменить span3 на span4.

Here's a Demo in jsFiddle

Который должен выглядеть следующим образом:

Код:

<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> 

---

Вариант 2

Как указал fasouto, вы также можете попробовать использовать justified navbar.

Here's a Justified Demo