时间戳

首页 > 解决方案 > Jumbotron 没有显示为灰色

css - Jumbotron 没有显示为灰色

问题描述

我的 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>

标签： csstwitter-bootstrapfrontend

解决方案

我认为您正在查看 Bootstrapv4文档，但根据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>

推荐阅读