Jumbotron 未在引导程序中显示 [重复]答案

【问题标题】：Jumbotron is not showing in bootstrap [duplicate]Jumbotron 未在引导程序中显示 [重复]
【发布时间】：2021-12-24 03:40:41
【问题描述】：

我目前是使用引导程序的新手，并且遇到了有关 jumbotron 的问题。当我应用它时，它不会显示，但里面的所有东西都会显示。这是代码：

<html lang="en">
  <head>
    <title>Boostrap Testing</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bs/bootstrap.min.css">
    <script src="bs/jquery.slim.min.js"></script>
    <script src="bs/bootstrap.bundle.min.js"></script>
  </head>

  <body>
    
    <div class="container">
      <div class="jumbotron">
          <h1>Home page is coming soon!</h1>
          <p>This website!<p>
          <a href="#" class="btn btn-info btn-lg">Test this button!</a>

      </div>
    </div>



  </body>
</html>

我安装了一个包含所有.min 文件的文件夹。我检查过，他们似乎都没有任何问题。有没有人可以解决这个问题？

【问题讨论】：

什么版本的 Bootstrap？
版本为5.1.3
getbootstrap.com/docs/5.1/migration/#jumbotron 和 getbootstrap.com/docs/5.1/examples/jumbotron

标签： html twitter-bootstrap bootstrap-5

【解决方案1】：

根据Bootstrap 5 migration document，Jumbotron 被“丢弃”。

jumbotron 组件，因为它可以使用实用程序进行复制。 See our new Jumbotron example for a demo.

他们提供的一个 BS5 示例是：

<div class="p-5 mb-4 bg-light rounded-3">
  <div class="container-fluid py-5">
    <h1 class="display-5 fw-bold">Custom jumbotron</h1>
    <p class="col-md-8 fs-4">Using a series of utilities, you can create this jumbotron, just like the one in previous versions of Bootstrap. Check out the examples below for how you can remix and restyle it to your liking.</p>
    <button class="btn btn-primary btn-lg" type="button">Example button</button>
  </div>
</div>

【讨论】：