bootstrap 中未显示 Jumbotron

Question

我目前是 bootstrap 的新手，遇到过关于超大屏幕的问题。当我应用它时，它不显示，但里面的所有内容都会显示。这是代码：

<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 文件的文件夹。我已经检查过了，他们似乎都没有任何问题。有人对此有解决方案吗？

Answer 1

根据 Bootstrap 5 migration document，超大屏幕被“丢弃”。

The jumbotron component as it can be replicated with utilities. 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>

bootstrap 中未显示 Jumbotron

Jumbotron is not showing in bootstrap

html

twitter-bootstrap

bootstrap-5