时间戳

首页 > 解决方案 > ASP.NET MVC Bootstrap 下拉菜单不显示

asp.net - ASP.NET MVC Bootstrap 下拉菜单不显示

问题描述

当我使用 MVC 时，我的链接不会出现。代码在 CSS/HTML 编辑器中运行良好，但当我在 MVC 布局上测试它时，下拉菜单不起作用。

<nav class="navbar navbar-expand-md navbar-dark" style="background-color: #333;text-align: center;">
    <div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item dropdown">
                <a class="nav-link" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Books
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="@Url.Action("New", "MyTemplate")">New books</a>
                    <a class="dropdown-item" href="@Url.Action("Recommend", "MyTemplate")">Recommended books</a>
                    <a class="dropdown-item" href="@Url.Action("Available", "MyTemplate")">Available books</a>

                </div>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link" href="#" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Categories
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown1">
                    <a class="dropdown-item" href="@Url.Action("Genres", "MyTemplate")">Genres</a>
                    <a class="dropdown-item" href="@Url.Action("Formats", "MyTemplate")">Formats</a>
                </div>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="@Url.Action("About", "MyTemplate")">About</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="@Url.Action("Contact", "MyTemplate")">Contact</a>
            </li>
        </ul>
    </div>

请注意，除了下拉列表中的链接（新、推荐、可用、流派、格式）之外，所有链接都可以正常工作。

Head 包含脚本和 bootstrap/css 样式文件：

    <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" initial-scale="1" shrink-to-fit="no" />

    <title>@ViewBag.Title</title>
    @RenderSection("head", false)
    <link rel="stylesheet" type="text/css" href="~/Content/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="~/Content/style.css">
    <link href="https://use.fontawesome.com/releases/v5.11.2/css/all.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script type="text/javascript" src="~/Scripts/bootstrap.js"></script>
    </head>

@Edit 解决方案：我必须下载 bootstrap 4.5。我已经使用 4.5 对其进行样式设置，但 MVC 的版本较旧，这会产生问题。解决方案是下载 bootstrap 4.5 所需的所有脚本并附加 bootstrap 4.5 的 CDN :)

标签： asp.netmodel-view-controller

解决方案

推荐阅读