ASP.Net MVC Web 应用程序 - 引导更新到版本 5答案

【问题标题】：ASP.Net MVC Web Application - Bootstrap update to version 5ASP.Net MVC Web 应用程序 - 引导更新到版本 5
【发布时间】：2022-01-23 08:18:57
【问题描述】：

我将引导程序从 v3.4.1 更新到 5.1.3，一开始我遇到了与来自 question 的 OP 相同的问题。我解决了这个问题。现在当我点击汉堡图标时，导航栏会展开，然后当我再次点击它时它不想缩小。

我从引导站点复制了导航栏示例。

我的布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Styles.Render("~/Content/css")
    <script src="~/Scripts/bootstrap.min.js"></script>
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container-fluid">
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
                <a class="navbar-brand" href="#">Hidden brand</a>
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="#">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Link</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link disabled">Disabled</a>
                    </li>
                </ul>
                <form class="d-flex">
                    <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
                    <button class="btn btn-outline-success" type="submit">Search</button>
                </form>
            </div>
        </div>
    </nav>

    <div class="container body-content">
        <br />
        @RenderBody()
    </div>
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

还有我的 BundleConfig

public static void RegisterBundles(BundleCollection bundles)
        {

            // Use the development version of Modernizr to develop with and learn from. Then, when you're
            // ready for production, use the build tool at https://modernizr.com to pick only the tests you need.
            bundles.Add(new Bundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-*"));

            bundles.Add(new Bundle("~/bundles/bootstrap").Include(
                      "~/Scripts/bootstrap.js"));

            bundles.Add(new Bundle("~/Content/css").Include(
                      "~/Content/bootstrap.css",
                      "~/Content/site.css"));
        }

【问题讨论】：

(1) 确定只加载了 5.1.3 CSS 和 JS 库，而 3.4.1 库没有加载到您的 html 中？ (2) 您是否尝试过只创建一个原始引导页面，然后将原始页面元素慢慢添加到原始页面中以确定何时中断？
您好，只加载了 bootstrap 5.1.3
(2) 您是否尝试过仅创建一个原始引导页面，然后将原始页面元素慢慢添加到原始页面中以确定何时中断？
(3) 是的，我做到了，但我找不到任何错误。它工作正常

标签： javascript c# .net asp.net-mvc bootstrap-5

【解决方案1】：

所以，我的 BoundleConfig.cs 是错误的。这是正确的

public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new Bundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js"));

            bundles.Add(new Bundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.validate*"));

            // Use the development version of Modernizr to develop with and learn from. Then, when you're
            // ready for production, use the build tool at https://modernizr.com to pick only the tests you need.
            bundles.Add(new Bundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-*"));

            bundles.Add(new Bundle("~/bundles/bootstrap").Include(
                      "~/Scripts/bootstrap.min.js"
                      ));

            bundles.Add(new Bundle("~/Content/css").Include(
                      "~/Content/bootstrap.css",
                      "~/Content/bootstrap.min.css",
                      "~/Content/site.css"));
        }

我在 _Layout.cshtml 中的 head 标签也是如此。这是正确的

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/bootstrap")
    <script src="~/Scripts/jquery-3.6.0.min.js"></script>
    @Scripts.Render("~/bundles/modernizr")
</head>

【讨论】：