如何修复引导程序从 3 升级到 5 的布局更改

安全性让我使用 NuGet 将 jQuery 从 3.2.1 升级到 3.6.0 并将引导程序从 3.3.7 升级到 5.0.1，并摆脱了旧的手动安装的 jQuery/bootstrap 文件，现在我遇到了一些布局问题无法修复。

症状 1

在这里，我有一个可见的按钮“切换导航”。以前，这个按钮是不可见的。我在 css 类上找到的信息sr-only说它应该在屏幕阅读器上不可见（为盲人计算机用户阅读屏幕内容），但我没有屏幕阅读器，但有一个 Firefox/chrome 浏览器。我猜这个类应该只显示给屏幕阅读器。无论如何，这个按钮什么都不做，所以我把它注释掉了。

<nav>
    <div class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <!-- button type="button" class="navbar-toggle collapsed"
                    data-toggle="collapse" data-target="#navbar" 
                    aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button -->
                <a href="/" class="pull-left">
                    <img src="/Images/company_logo.png" />
                </a>
                <span id="span_pagetitle" class="pull-left span_pagetitle" runat="server">
                   Page Title
                </span>
            </div>

奇怪的是，Chrome 开发工具在 Elements、Styles 下显示sr-only是由 bootstrap.min.css 处理的，但新的 Bootstrap5 由 _reboot.scss 处理。下划线表明这是一个临时文件，它与更高级别的 CSS 系统 SCSS 或 SASS 相关的扩展名

在 DevTools 的 Network 下，我仍然看到 bootstrap.min.css 是从 Content 文件夹下载的。

症状 2

在上面的标题代码中，徽标图像和页面标题在浅灰色标题栏的相同高度上很好地显示。但是升级之后，布局就没了，毁了。图片和文字都降低了，但是幅度不同，并且没有浅灰色的标题栏作为图片和文字的背景。

我需要学习 SASS 来解决这个问题吗？

或者安装引导程序时可能出现问题？

老实说，我不得不手动将 jQuery 文件从包复制到脚本。我现在还想知道 jquery-ui.min.js/css 和 jquery-latest.min.js 来自包 mutty-keyboard 的未升级版本，如 DevTools 的 Network 选项卡所示。这会导致对引导程序的干扰吗？？？

感谢您提供任何可能使我朝着正确方向前进的提示。