html - bootstrap drop down inside navbar not correctly displayed -
the navbar bellow contains drop down menu not displayed correcly ,
<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>
why adding inline styles full width navbar? anyways here's answer:
<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>
Comments
Post a Comment