导航栏中的引导下拉菜单未正确显示
Posted
技术标签:
【中文标题】导航栏中的引导下拉菜单未正确显示【英文标题】:bootstrap drop down inside navbar not correctly displayed 【发布时间】:2013-03-22 12:48:02 【问题描述】:下面的导航栏包含一个未正确显示的下拉菜单,
<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>
【问题讨论】:
【参考方案1】:为什么要向已经全宽的导航栏添加内联样式?无论如何,这是你的答案:
<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>
【讨论】:
这是一个很好解释的例子,w3resource.com/twitter-bootstrap/navbar-tutorial.php以上是关于导航栏中的引导下拉菜单未正确显示的主要内容,如果未能解决你的问题,请参考以下文章