如何修复引导程序从 3 升级到 5 造成的布局变化

Question

安全性使我使用 NuGet 将 jQuery 从 3.2.1 升级到 3.6.0，将 bootstrap 从 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 来解决这个问题吗？

或者安装 bootstrap 时可能出了什么问题？

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

感谢您提供任何可能将我推向正确方向的提示。

---

更新：

虽然这个问题的答案实际上非常有用，但我还发现没有从 Bootstrap 3 升级到 5 之类的东西。这些只是不同的工具包。所以这个问题在某种程度上已经过时了。真正的答案应该是，不要升级。在您的新项目中使用 Bootstrap 5。

建议此升级的安全扫描做了太多升级建议，也许是为了让您感到害怕并掏出您的钱包:-)

Answer 1

事实上，新版本的引导程序已经改变了很多东西。首先，你不需要为此学习SASS，这只是新版本中更改的类名称的玩法。

例如，您已突出显示该类sr-only，但在较新的版本中，该类的名称已更改。

将 .sr-only 和 .sr-only-focusable 重命名为 .visually-hidden 和 .visually-hidden-focusable

您唯一需要做的就是阅读本文档，您的所有问题都将得到解决。

另外，在新版本中，不需要 jQuery。

阅读这些文档中有关 Bootstrap 版本迁移的所有信息 - https://getbootstrap.com/docs/5.0/migration/