Bootstrap 5 切换器未在移动视图中显示和工作

Question

I have changed my boostrap from 3.3.7 to 5.2 and after that my navbar-toggler isn't showing in . The normal web page view for my asp.net MVC project is . I have used two menu - top horizontal with the username and logoff link and the left side-menu bar using this free template . This template uses bootstrap 3.3.7 but when I updated my bootstrap to version 5.2, the navbar-toggler is gone in mobile view.

My BundleConfig for the menu is

    bundles.Add(new StyleBundle("~/Content/menu").Include(
                      "~/Content/css/style.min.css"
       ));

        bundles.Add(new ScriptBundle("~/bundles/Menu").Include(
                                "~/html/js/sidebarmenu.js",
                                   "~/html/js/custom.js"
    

style.min.css/style.css is here in this link

sidebarmenu.js is

                        /*
                    Template Name: Admin Template

                    File: js
                    */
                    // ============================================================== 
                    // Auto select left navbar
                    // ============================================================== 
                    $(function() {
                        "use strict";
                         var url = window.location + "";
                            var path = url.replace(window.location.protocol + "//" + window.location.host + "/", "");
                            var element = $('ul#sidebarnav a').filter(function() {
                                return this.href === url || this.href === path;// || url.href.indexOf(this.href) === 0;
                            });
                            element.parentsUntil(".sidebar-nav").each(function (index)
                            {
                                if($(this).is("li") && $(this).children("a").length !== 0)
                                {
                                    $(this).children("a").addClass("active");
                                    $(this).parent("ul#sidebarnav").length === 0
                                        ? $(this).addClass("active")
                                        : $(this).addClass("selected");
                                }
                                else if(!$(this).is("ul") && $(this).children("a").length === 0)
                                {
                                    $(this).addClass("selected");
            
                                }
                                else if($(this).is("ul")){
                                    $(this).addClass('in');
                                }
        
                            });

                        element.addClass("active"); 
                        $('#sidebarnav a').on('click', function (e) {
    
                                if (!$(this).hasClass("active")) {
                                    // hide any open menus and remove all other classes
                                    $("ul", $(this).parents("ul:first")).removeClass("in");
                                    $("a", $(this).parents("ul:first")).removeClass("active");
            
                                    // open our new menu and add the open class
                                    $(this).next("ul").addClass("in");
                                    $(this).addClass("active");
            
                                }
                                else if ($(this).hasClass("active")) {
                                    $(this).removeClass("active");
                                    $(this).parents("ul:first").removeClass("active");
                                    $(this).next("ul").removeClass("in");
                                }
                        })
                        $('#sidebarnav >li >a.has-arrow').on('click', function (e) {
                            e.preventDefault();
                        });

                    });

Custom.js is

                         /*jslint browser: true*/
                     /*global $, jQuery, alert*/

                     $(document).ready(function () {

                         "use strict";

                         var body = $("body");

                             $(".preloader").fadeOut();
                        // this is for close icon when navigation open in mobile view
                        $(".nav-toggler").on('click', function() {
                            $("#main-wrapper").toggleClass("show-sidebar");
                            $(".nav-toggler i").toggleClass("ti-menu");
                        });
                        $(".search-box a, .search-box .app-search .srh-btn").on('click', function() {
                            $(".app-search").toggle(200);
                            $(".app-search input").focus();
                        });
                     // ============================================================== 
                        // Resize all elements
                        // ============================================================== 
                        $("body, .page-wrapper").trigger("resize");
                        $(".page-wrapper").delay(20).show();

                        //****************************
                        /* This is for the mini-sidebar if width is less then 1170*/
                        //**************************** 
                        var setsidebartype = function() {
                            var width = (window.innerWidth > 0) ? window.innerWidth : this.screen.width;
                            if (width < 1170) {
                                $("#main-wrapper").attr("data-sidebartype", "mini-sidebar");
                            } else {
                                $("#main-wrapper").attr("data-sidebartype", "full");
                            }
                        };
                        $(window).ready(setsidebartype);
                        $(window).on("resize", setsidebartype);





                         /* ===== Tooltip Initialization ===== */

                         $(function () {
                             $('[data-toggle="tooltip"]').tooltip();
                         });

                         /* ===== Popover Initialization ===== */

                         $(function () {
                             $('[data-toggle="popover"]').popover();
                         });



                         /* ===== Sidebar ===== */

                         $('.slimscrollright').slimScroll({
                             height: '100%',
                             position: 'right',
                             size: "5px",
                             color: '#dcdcdc'
                         });
                         $('.slimscrollsidebar').slimScroll({
                             height: '100%',
                             position: 'right',
                             size: "6px",
                             color: 'rgba(0,0,0,0.3)'
                         });
                         $('.chat-list').slimScroll({
                             height: '100%',
                             position: 'right',
                             size: "0px",
                             color: '#dcdcdc'
                         });


                         /* ===== Visited ul li ===== */

                         $('.visited li a').on("click", function (e) {
                             $('.visited li').removeClass('active');
                             var $parent = $(this).parent();
                             if (!$parent.hasClass('active')) {
                                 $parent.addClass('active');
                             }
                             e.preventDefault();
                         });

                         /* ===== Login and Recover Password ===== */

                         $('#to-recover').on("click", function () {
                             $("#loginform").slideUp();
                             $("#recoverform").fadeIn();
                         });

                         /* ================================================================= 
                             Update 1.5
                             this is for close icon when navigation open in mobile view
                         ================================================================= */


                     });


     

My masterpage menu is

              <div id="main-wrapper" data-layout="vertical" data-navbarbg="skin5" data-sidebartype="full"
                 data-sidebar-position="absolute" data-header-position="absolute" data-boxed-layout="full">
                <!------------------------------------------------------------------------->
                <!-- ============================================================== -->
                <!-- Topbar header --->
                <!-- ============================================================== -->
                <header class="topbar" data-navbarbg="skin5">
                    <nav class="navbar top-navbar navbar-expand-md navbar-dark">
                        <div class="navbar-header" data-logobg="skin6">
                            <!-- ============================================================== -->
                            <!-- Logo -->
                            <!-- ============================================================== -->
                            <a class="navbar-brand" href="@Url.Action("Index", "Sales")">
                                <!-- Logo icon -->
                                <b class="logo-icon">
                                    <!-- Dark Logo icon -->
                                    <img src="~/plugins/images/logo-icon.png" alt="homepage" />
                                </b>
                                <!--End Logo icon -->
                                <!-- Logo text -->
                                <span class="logo-text">
                                    <!-- dark Logo text -->
                                    <img src="~/plugins/images/logo-text.png" alt="homepage" />
                                </span>
                            </a>
                            <!-- ============================================================== -->
                            <!-- End Logo -->
                            <!-- ============================================================== -->
                            <!-- ============================================================== -->
                            <!-- toggle and nav items -->
                            <!-- ============================================================== -->
                            <a class="nav-toggler waves-effect waves-light text-dark d-block d-md-none mr-auto"
                               href="javascript:void(0)"><i class="ti-menu ti-close"></i></a>
                        </div>
                        <!-- ============================================================== -->
                        <!-- End Logo -->
                        <!-- ============================================================== -->
           
                        <div class="navbar-collapse collapse" id="navbarSupportedContent"
                             data-navbarbg="skin5">

                            <ul class="navbar-collapse d-flex justify-content-end">
                                <li class="nav navbar-nav">
                                </li>
                                <li class="nav navbar-nav">

                                    @Html.Partial("_LoginPartial")
                                </li>
                            </ul>

                        </div>
                    </nav>
                </header>
                <!-- ============================================================== -->
                <!-- End Topbar header -->
                <!-- ============================================================== -->
                <!-- ============================================================== -->
                <!-- Left Sidebar --->
                <!-- ============================================================== -->
                <aside id="side-menu" class="left-sidebar" data-sidebarbg="skin6">
                    <!-- Sidebar scroll-->
                    <div class="scroll-sidebar">
                        <!-- Sidebar navigation-->
                        <nav class="sidebar-nav">
                            <ul id="sidebarnav">
                                <li class="sidebar-item pt-2">
                                    <a class="sidebar-link waves-effect waves-dark sidebar-link" href="@Url.Action("Index", "Sales")"
                                       aria-expanded="false">
                                        <i class="fa fa-columns" aria-hidden="true"></i>
                                        <span class="hide-menu">Dashboard</span>
                                    </a>
                                </li>
                                <li class="sidebar-item">
                                    <a class="sidebar-link waves-effect waves-dark sidebar-link" href="@Url.Action("SalesChart", "Sales")"
                                       aria-expanded="false">
                                        <i class="fa fa-bar-chart" aria-hidden="true"></i>
                                        <span class="hide-menu">Chart</span>
                                    </a>
                                </li>
                                <li class="sidebar-item">
                                    <a class="sidebar-link waves-effect waves-dark sidebar-link" href="@Url.Action("SalesTable", "Sales")"
                                       aria-expanded="false">
                                        <i class="fa fa-table" aria-hidden="true"></i>
                                        <span class="hide-menu">Grid Table</span>
                                    </a>
                                </li>
                                <li class="sidebar-item">
                                    <a class="sidebar-link waves-effect waves-dark sidebar-link" href="@Url.Action("SalesGeoChart", "Sales")"
                                       aria-expanded="false">
                                        <i class="fa fa-globe" aria-hidden="true"></i>
                                        <span class="hide-menu">Drill Down Map</span>
                                    </a>
                                </li>
                            </ul>

                        </nav>
                        <!-- End Sidebar navigation -->
                    </div>
                    <!-- End Sidebar scroll-->
                </aside>
                <!-- ============================================================== -->
                <!-- End Left Sidebar ---->
                <!-- ============================================================== -->

                <div class="page-wrapper">
                      @RenderBody()
                    <footer class="footer text-center"> @DateTime.Now.Year  &copy; Bike Sales Analytics brought to you by developers.com </footer>

                </div>
  
            </div>

Answer 1

尝试将元素： <span class="navbar-toggler-icon"></span>放在nav-toggler元素中（您可能没有注意到该图标，因为它是白底白字）