升级Bootstrap至5.2后ASP.NET MVC项目移动端navbar-toggler不显示问题

云原生阿岚

2026-9-30

提问内容

我将项目的Bootstrap从3.3.7版本升级到5.2版本后，navbar-toggler在移动端视图下无法显示，移动端视图如下：
移动视图
ASP.NET MVC项目的桌面端正常视图如下：
桌面视图
项目使用了两套菜单：顶部水平菜单（包含用户名和登出链接）、左侧边栏菜单，基于第三方免费模板开发，该模板原生使用Bootstrap 3.3.7，升级Bootstrap到5.2版本后就出现了移动端导航栏切换按钮消失的问题。

相关配置代码

BundleConfig配置

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"

sidebarmenu.js代码

/*
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代码

/*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
    ================================================================= */


});

母版页菜单代码

<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>

解决方案

核心原因

Bootstrap 3到5存在大量破坏性更新，原适配Bootstrap 3的模板样式、JS逻辑与新版本框架规则不兼容，导致移动端导航切换按钮被默认隐藏、交互失效。

修复步骤

1. 修正导航切换按钮类名与结构

将母版页中原有的a标签切换按钮替换为适配Bootstrap 5的代码，避免被框架默认样式隐藏：

<!-- 替换前 -->
<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>

<!-- 替换后 -->
<button class="navbar-toggler nav-toggler waves-effect waves-light text-dark border-0 ms-auto" 
        type="button" 
        aria-expanded="false" 
        aria-label="切换导航">
    <i class="ti-menu ti-close"></i>
</button>

2. 调整侧边栏折叠类名适配

Bootstrap 3中折叠组件的显示类为in，Bootstrap 5已修改为show，将sidebarmenu.js中所有addClass('in')替换为addClass('show')，所有removeClass('in')替换为removeClass('show')。

3. 适配Bootstrap 5组件规则

Bootstrap 5将所有内置组件的data属性前缀修改为data-bs-，对应调整代码：

将所有HTML中的data-toggle="tooltip"、data-toggle="popover"修改为data-bs-toggle="tooltip"、data-bs-toggle="popover"
修改custom.js中的初始化代码：

// 替换前
$(function () {
    $('[data-toggle="tooltip"]').tooltip();
});
$(function () {
    $('[data-toggle="popover"]').popover();
});

// 替换后
$(function () {
    $('[data-bs-toggle="tooltip"]').tooltip();
});
$(function () {
    $('[data-bs-toggle="popover"]').popover();
});

4. 新增兜底样式确保按钮显示

添加自定义CSS覆盖框架默认规则，避免按钮在移动端被隐藏：

@media (max-width: 767.98px) {
    .navbar-toggler.nav-toggler {
        display: block !important;
        z-index: 100;
    }
}

内容的提问来源于stack exchange，提问作者devvab

升级Bootstrap至5.2后ASP.NET MVC项目移动端navbar-toggler不显示问题

相关配置代码 #

BundleConfig配置 #

sidebarmenu.js代码 #

custom.js代码 #

母版页菜单代码 #

核心原因 #

修复步骤 #

1. 修正导航切换按钮类名与结构 #

2. 调整侧边栏折叠类名适配 #

3. 适配Bootstrap 5组件规则 #

4. 新增兜底样式确保按钮显示 #