带按钮组的Bootstrap下拉切换在nav-bar中不起作用

Question

我正在研究MVC 5并使用Bootstrap进行前端设计。 我的共享文件夹中有CSHTML布局页面。 所有布局都包含一个导航栏，其中包含多个选项。 但是， <form class="navbar-form navbar-right"></form>中的btn-group不会显示下拉菜单。 这是代码片段：

<form class="navbar-form navbar-right">
    <ul class="nav navbar-nav navbar-right">
        <li>
            <div class="btn-group">
                 <button type="button" class="btn btn-link dropdown-toggle" data-toggle="dropdown">
                     <span class="glyphicon glyphicon-user"></span> @Session["emp_main_first"] <span class="caret"></span>
                 </button>

                 <!-- dropdown menu items-->
                 <ul class="dropdown-menu" role="menu">
                     <li><a href="#"><span class="glyphicon glyphicon-pencil"></span> Edit profile</a></li>
                     <li><a href="../EmployeeRegister/LogOut"><span class="glyphicon glyphicon-cog"></span> Log out</a></li>
                 </ul>
            </div>
        </li>
    </ul>
</form>

我错过了什么？ 任何帮助将不胜感激。 提前致谢。

Answer 1

您可以使用<a></a>而不是<button></button>并应用css。

<div class="btn-group dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
       <ul class="dropdown-menu"></ul>
</div>

希望这对你有用！

Answer 2

您可以尝试以下相同的代码，它应该适用于您的情况。

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<form class="navbar-form navbar-right">
    <ul class="nav navbar-nav navbar-right">
        <li>
            <div class="btn-group">
                 <button type="button" class="btn btn-link dropdown-toggle" data-toggle="dropdown">
                     <span class="glyphicon glyphicon-user"></span> @Session["emp_main_first"] <span class="caret"></span>
                 </button>
                 <!-- dropdown menu items-->
                 <ul class="dropdown-menu" role="menu">
                     <li><a href="#"><span class="glyphicon glyphicon-pencil"></span> Edit profile</a></li>
                     <li><a href="../EmployeeRegister/LogOut"><span class="glyphicon glyphicon-cog"></span> Log out</a></li>
                 </ul>
            </div>
        </li>
    </ul>
</form>

Answer 3

给下拉菜单一个ID然后从data-target调用它所以，

<button type="button" class="btn btn-link dropdown-toggle" data-toggle="dropdown" data-target="#dropdown">

然后，使用ID来调用它

<ul class="dropdown-menu" role="menu" id="dropdown">

这样，查找要切换的内容的ID（因此，要显示的菜单）。