Bootstrap中Jumbotron组件不显示但内部内容正常问题求助

• 你遇到的问题核心是 Bootstrap 5 已正式移除jumbotron组件，你本地引入的bootstrap.min.css大概率是v5版本，不存在jumbotron对应的背景、内边距、圆角等预设样式，因此只有组件内部的文字、按钮等内容正常展示，组件本身无特殊效果。

你可以二选一即可：

方案1：替换为Bootstrap 4版本依赖 #

Bootstrap 4原生支持jumbotron组件，将你本地的Bootstrap CSS、JS文件替换为Bootstrap 4.x的对应版本即可恢复组件正常显示。

方案2：保留Bootstrap 5，手动补充jumbotron样式 #

如果你需要继续使用Bootstrap 5，在页面<head>标签中添加如下自定义样式即可：

<style>
.jumbotron {
  padding: 2rem 1rem;
  margin-bottom: 2rem;
  background-color: #e9ecef;
  border-radius: .3rem;
}
</style>

添加后原有jumbotron类的效果和Bootstrap 4完全一致，不需要修改其他HTML代码。

• 检查你代码中<p>This website!<p>没有闭合，建议修正为<p>This website!</p>避免潜在的样式错乱
• 确认依赖文件的引用路径正确，你当前写的bs/开头的相对路径需保证和本地文件存放路径完全匹配

内容的提问来源于stack exchange，提问作者David Babalola