导航栏中使用按钮组的Bootstrap下拉菜单无法正常工作

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>

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

- IamRuku

---

我有点困惑，因为我测试了这里展示的代码，但下拉框并没有像这里展示的那样显示出来： http://www.bootply.com/HyPzXN0L1I - Jamie Eltringham

感谢 @jamie。我已经缩小了问题范围。除了一个布局，这个控件在所有其他布局中都正常工作。我没有对它做任何更改，但令人惊讶的是，当我单击按钮时，下拉菜单不出现。可能的问题是什么呢？ - IamRuku

你能否创建一个 Bootply 示例，这样我就可以看到完整的页面，因为你展示的代码在我测试时似乎是有效的。 - Jamie Eltringham

问题在于，如果我将这段代码用于其他页面或者说一个 Fiddle 上，它似乎完美地运行。只有当我在那个特定的页面中使用它时才无法工作。这可能与 Bootstrap 引用有关吗？ - IamRuku

你是否正在使用最新的Bootstrap资源？ - Jamie Eltringham

是的。我正在使用 Bootstrap 3.0.2。 - IamRuku

Answer 1

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

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

- Faisal Ramzan

---

非常感谢你，Faisal。问题已经解决了。但我仍然想知道导致这个问题的实际错误是什么！ :/ - IamRuku

我认为出现了冲突，您正在使用与 Bootstrap JavaScript 文件冲突的旧 jQuery 库。 - Faisal Ramzan

Answer 2

您可以使用<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>

希望这对你有用！

- Shweta

---

出于某种原因，当在面板页脚中使用btn-group时，这解决了我的问题。 - Ryan Rentfro

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来切换显示（因此，用于显示菜单）。

- user5686312