如何正确在网页中加载Bootstrap CSS 样式未生效问题修复

你当前引入的是Bootstrap 5.2版本CSS，样式未完全生效的核心原因是Bootstrap 5 已正式移除jumbotron（巨幕）组件，你代码中使用的jumbotron、jumbotron-fluid类在v5版本的样式表中没有对应规则，自然无法生效。
另外注意：不要在<p>标签内嵌套<div>这类块级元素，浏览器渲染时会自动纠错打乱DOM结构，也会导致样式异常。

二选一即可：

• 保留Bootstrap 5版本，用内置工具类实现jumbotron效果
  不需要额外引入其他资源，直接用v5自带的间距、背景、圆角类即可还原和旧版jumbotron完全一致的视觉效果，完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
</head>
<body>
  <div class="p-5 mb-4 bg-light rounded-3">
    <div class="container-fluid py-3">
      <h1 class="display-4">Awesome!</h1>
      <p class="lead">You've been successfully signed up to the Newsletter :)</p>
    </div>
  </div>
</body>
</html>

• 降级到Bootstrap 4版本使用原生jumbotron类
  如果你不想调整类名，直接把头部引入的Bootstrap CSS替换为4.x稳定版资源，原有业务代码无需改动即可正常显示jumbotron样式。

• CSS的<link>标签必须放在<head>标签内部，且要放在自定义样式之前，避免自定义样式被默认样式覆盖
• 使用CDN引入时，要保证integrity校验值、crossorigin属性和引入版本的官方参数匹配，否则会因为安全校验失败导致资源无法加载
• 引入的版本要和代码中使用的类名对应，跨大版本升级（比如v4升级v5）时存在大量类名删除、改名的情况，需要对照对应版本的文档调整代码
• 严格遵守HTML嵌套规则，不要在行内元素内嵌套块级元素，避免DOM结构被浏览器自动修正后样式匹配失效

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