Twitter bootstrap - Navbar avec les onglets ne fonctionnent pas

Question

J'essaie d'ajouter des onglets dans .navbar mais .tab-content ne montre pas les onglets ci-dessous, mais à côté. Lorsque je supprime .navbar les onglets de classe fonctionnent correctement (le contenu est sous les onglets), donc il y a un problème avec la classe .navbar. Est-ce que quelqu'un sait quel pourrait être le problème?

Voici le code:

<div class="navbar navbar-fixed-top"> 
<div class="navbar-inner"> 
    <div class="container-fluid"> 
    <a class="brand" href="/system/default/">Home</a> 
    <div class="nav-collapse subnav-collapse"> 
    <div id="snippet--mainMenu"> 
     <ul class="nav nav-tabs"> 
     <li class=""><a href="#tab1" data-toggle="tab">Analyze</a></li> 
     <li class=""><a href="#tab2" data-toggle="tab">Portfolio</a></li> 
     <li class=""><a href="/system/search/" >Search</a></li> 
     </ul> 
     <div class="tab-content" style="padding-bottom: 9px; border-bottom: 1px solid #ddd;"> 
     <div class="tab-pane" id="tab1"> 
     <ul> 
     <li style="display: inline;list-style-type: none;"><a href="/system/analyze/builder">Builder</a></li> 
     <li style="display: inline;list-style-type: none;"><a href="/system/analyze/history">History</a></li> 
     <li style="display: inline;list-style-type: none;"><a href="/system/analyze/optimize">Optimize</a></li> 
     </ul> 
     </div> 
     <div class="tab-pane" id="tab2"> 
     <ul> 
     <li style="display: inline;list-style-type: none;"><a href="/system/portfolio/list">Table List</a></li> 
     <li style="display: inline;list-style-type: none;"><a href="/system/portfolio/watchlist">Watchlist</a></li> 
     <li style="display: inline;list-style-type: none;"><a href="/system/portfolio/temporary">Temporary</a></li> 
     </ul> 
     </div> 
    </div> 
    </div>      
    <div class="btn-group pull-right"> 
    <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"><i class="icon-user"></i> User<span class="caret"></span></a> 
    <ul class="dropdown-menu"> 
    <li><a href="/system/user/">Profile</a></li> 
    <li class="divider"></li> 
    <li><a href="/system/default/logout">Sign Out</a></li> 
    </ul> 
    </div>      
    </div><!-- /.nav-collapse -->         
</div><!-- /.container-fluid --> 
</div><!-- /.navbar-inner --> 
</div><!-- /.navbar --> 

Answer 1

Vous confondez deux choses différentes. La barre de navigation et les onglets ne sont pas compatibles. Vous ne pouvez pas inclure .nav-tabs à l'intérieur d'un .navbar, sans mentionner le .tab-panes.
Vous pouvez obtenir une barre de navigation avec

<div class="navbar"> 
    <div class="navbar-inner"> 
     <a class="brand" href="#">Title</a> 
     <ul class="nav"> 
      <li class="active"><a href="#">Home</a></li> 
      <li><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
     </ul> 
    </div> 
</div> 

Ou vous pouvez obtenir une navigation par onglets avec

<div class="tabbable"> <!-- Only required for left/right tabs --> 
    <ul class="nav nav-tabs"> 
     <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li> 
     <li><a href="#tab2" data-toggle="tab">Section 2</a></li> 
    </ul> 
    <div class="tab-content"> 
     <div class="tab-pane active" id="tab1"> 
      <p>I'm in Section 1.</p> 
     </div> 
     <div class="tab-pane" id="tab2"> 
      <p>Howdy, I'm in Section 2.</p> 
     </div> 
    </div> 
</div> 

Mais vous ne pouvez pas mélanger ce code.

Answer 2

solution est style="clear: both;" pour .tab-content

Answer 3

En fait, avec un peu d'effort ennuyeux, vous pouvez.

Créez votre barre de navigation & votre tabbable comme 2 choses distinctes. Cacher les nav.nav-tabs. Ensuite, attachez des scripts aux entrées de la barre de navigation pour afficher l'onglet approprié et (pour être complet) mettez en surbrillance l'entrée de la barre de navigation sélectionnée (ce que Bootstrap ferait pour une barre de navigation normale).