css - 如何修复从 3 到 5 的 Bootstrap 升级的布局更改

Question

安全性让我使用 NuGet 将 jQuery 从 3.2.1 升级到 3.6.0 并从 3.3.7 Bootstrap 到 5.0.1，并摆脱了旧的手动安装的 jQuery/bootstrap 文件，现在我有了一些布局我无法解决的问题。

症状 1

在这里我有一个可见的按钮“切换导航”。以前，这个按钮是不可见的。我在 css class 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 开发工具显示 sr-only 由 bootstrap.min.css 处理，但新的 Bootstrap5 由 _reboot.scss 处理。下划线表明这是一个临时文件，它的扩展名与更高级别的CSS系统SCSS或SASS有关

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

症状 2

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

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

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

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

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

---

更新:

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

建议此升级的安全扫描提供了太多升级建议，可能会让你害怕并掏出你的钱包:-)

Answer 1

实际上，新版本的 Bootstrap 中发生了很多变化。首先，你不需要为此学习SASS，这只是在新版本中更改了类名的玩法。

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

Renamed .sr-only and .sr-only-focusable to .visually-hidden and .visually-hidden-focusable

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

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

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