Bootstrap下拉菜单在_Layout.cshtml中不起作用在MVC 4中共享

时间:2013-12-11 21:12:19

标签: asp.net-mvc-3 asp.net-mvc-4 twitter-bootstrap twitter-bootstrap-3

我正在尝试在共享的_Layout中实现一个下拉菜单,但遗憾的是没有成功。

你们知道这里的问题是什么:

    <nav>
        <div class="dropdown">
            <button class="btn" data-toggle="dropdown"> This that </button>
            <ul class="dropdown-menu">
                <li>@Html.ActionLink("Home", "Index", "Home")</li>
                <li>@Html.ActionLink("About", "About", "Home")</li>
                <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
            </ul>
        </div>
    </nav>

当我显示:阻止我的ul我可以看到下拉,但在上面的情况下,当我点击按钮没有任何下降。

5 个答案:

答案 0 :(得分:2)

以下是我的解决方法,以防有人仍在寻找。

   .dropdown:hover .dropdown-menu {display: block;}

     .nav-tabs .dropdown-menu, .nav-pills .dropdown-menu, .navbar .dropdown-menu
     {margin-top: 0;}    

答案 1 :(得分:1)

现在这可能没用了。但我想分享实际问题。

我遇到了同样的问题。 问题是导入bootstrap css文件的正常版本和缩小版本。

//错误的方式

<link href="@Url.Content("~/Content/themes/vendor/bootstrap.min.css")" rel="stylesheet" />
<link href="@Url.Content("~/Content/themes/vendor/bootstrap-theme.min.css")" rel="stylesheet" />
 <link href="@Url.Content("~/Content/themes/vendor/bootstrap.css")" rel="stylesheet" />
<link href="@Url.Content("~/Content/themes/vendor/bootstrap-theme.css")" rel="stylesheet" />

//正确的方式

<link href="@Url.Content("~/Content/themes/vendor/bootstrap.min.css")" rel="stylesheet" />
<link href="@Url.Content("~/Content/themes/vendor/bootstrap-theme.min.css")" rel="stylesheet" />

答案 2 :(得分:1)

我正在使用ASP.NET MVC 5并遇到同样的问题。我的解决方案是在&lt;中包含jquery.min.js和bootstrap.min.js脚本。头&gt; _Layout.cshtml的一部分。

答案 3 :(得分:0)

我认为这应该会有所帮助。

<li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                            Profile
                            <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu" role="menu">
                            <li>@Html.ActionLink("My Profile", "Add", "Storage")</li>
                            <li>@Html.ActionLink("Log Out", "LogOut", "Login")</li>
                        </ul>
                    </li>

答案 4 :(得分:0)

这是一个下拉菜单按钮。这对我有用。你可以修改它。

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>