Jumbotron 没有显示为灰色

【问题标题】：Jumbotron not showing as grayishJumbotron 没有显示为灰色
【发布时间】：2021-07-07 06:06:11
【问题描述】：

我的 bootstrap jumbotron 不会像文档显示的那样显示暗灰色背景。我做错了吗？

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<br/>
<div class="jumbotron">
  <h1 class="display-4">Todo App</h1>
  <p class="lead">This is a simple todo app that can help you keep track of your todos.</p>
  <p class="lead">
    <a class="btn btn-primary btn-lg">Create a new todo list</a>
  </p>
</div>

【问题讨论】：

标签： css twitter-bootstrap frontend

【解决方案1】：

我认为您正在查看 Bootstrap v4 文档，但根据 v5 文档，您需要添加诸如 bg-light 或 bg-dark 之类的类

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<br/>
<div class="p-5 jumbotron bg-light">
  <h1 class="display-4">Todo App</h1>
  <p class="lead">This is a simple todo app that can help you keep track of your todos.</p>
  <p class="lead">
    <a class="btn btn-primary btn-lg">Create a new todo list</a>
  </p>
</div>

【讨论】：