Question

下面的导航栏包含一个无法正确显示的下拉菜单

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

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

导航栏内的bootstrap下拉列表未正确显示

1 个答案: