如何修复布局更改 bootstrap 从 3 升级到 5

Question

安全性让我使用 NuGet 将 jQuery 从 3.2.1 升级到 3.6.0 并将 bootstrap 从 3.3.7 升级到 5.0.1，并摆脱旧的 hand-installed jQuery/bootstrap 个文件，现在我遇到了一些无法修复的布局问题。

症状 1

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

<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 的网络下，我仍然看到 bootstrap.min.css 是从内容文件夹下载的。

症状 2

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

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

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

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

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

更新：

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

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

Answer 1

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

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

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

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

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

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

如何修复布局更改 bootstrap 从 3 升级到 5

How to fix layout changes from bootstrap upgrade from 3 to 5

css

nuget

twitter-bootstrap