我正在尝试在共享的_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我可以看到下拉,但在上面的情况下,当我点击按钮没有任何下降。
答案 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>