2013-04-01 81 views
3

導航欄波紋管包含一個下拉菜單,不正確地將顯示,自舉下拉導航欄裏面顯示不正確

<div style="margin: auto; width: 100%; margin-top: 0px"> 
       <div class="navbar" style="width: 100%"> 
        <div class="navbar-inner"> 
         <div class="container"> 
          <a class="btn btn-navbar" data-toggle="collapse" 
           data-target=".navbar-responsive-collapse"> <span 
           class="icon-bar"></span> <span class="icon-bar"></span> <span 
           class="icon-bar"></span> </a> 
          <a class="brand" href="#">Acceuil</a> 
          <div class="nav-collapse collapse navbar-responsive-collapse"> 
           <ul class="nav"> 

            <li class="active"> 
             <a href='acceuil/acceuil.jsp'>Notifications</a> 
            </li> 
            <li> 
             <a href='acceuil/gestionIndividuelle.jsp'>Gestion individuelle</a> 
            </li> 
             <li> 
             <a href='acceuil/tableaux.jsp'>Tableaux</a> 
            </li> 
            <li class="dropdown"> 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> 
           <ul class="dropdown-menu"> 
           <li><a href="#">Action</a></li> 
           <li><a href="#">Another action</a></li> 
           <li><a href="#">Something else here</a></li> 
           <li class="divider"></li> 
           <li class="nav-header">Nav header</li> 
           <li><a href="#">Separated link</a></li> 
           <li><a href="#">One more separated link</a></li> 
           </ul> 
          </li> 



            <li> 
             <a href=''>Notes</a> 
            </li> 
            <li> 
             <a href='acceuil/comptes.jsp'>comptes</a> 
            </li> 
           </ul> 

           <ul class="nav pull-right"> 
            <li class="divider-vertical">e</li> 
            <li> 
             <a href="logout.do">Déconnexion</a> 
            </li> 
           </ul> 
          </div> 
          <!-- /.nav-collapse --> 
         </div> 
        </div> 
        <!-- /navbar-inner --> 
       </div> 
      </div> 
     </div> 

回答

6

你爲什麼要添加內嵌樣式已經全寬導航欄?無論如何這裏是你的答案:

<div class="navbar"> 
<div class="navbar-inner"> 
<div class="container"> 
<a class="btn btn-navbar" data-target=".navbar-responsive-collapse"      data-toggle="collapse"> 
<a class="brand" href="#">Title</a> 
<div class="nav-collapse collapse navbar-responsive-collapse"> 
<ul class="nav"> 
<li class="active"></li> 
<li class="dropdown"> 
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown 
<b class="caret"></b> 
</a> 

<ul class="dropdown-menu"> 
<li> 
<a href="#">Action</a> 
</li> 

<li class="divider"></li> 
<li class="nav-header">Nav header</li> 


</ul> 
</li> 
<form class="navbar-search pull-left" action=""> 
<ul class="nav pull-right"> 
</div> 
</div> 
</div> 
</div> 
+0

這是一個很好的解釋的例子,http://www.w3resource.com/twitter-bootstrap/navbar-tutorial.php – fatiDev