使用 Bootstrap 4 jumbotron 类时的图像轮播
Posted
技术标签:
【中文标题】使用 Bootstrap 4 jumbotron 类时的图像轮播【英文标题】：Image carousel while using Bootstrap 4 jumbotron classes 【发布时间】：2018-06-30 12:00:22 【问题描述】：我正在建立一个样机网站，并且目前能够构建准系统。
#hero
background: url("https://picsum.photos/1280/710") no-repeat center;
background-size: cover;
.book
height: 100px;
width: 100px;
bottom: 9vh;
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="./styles.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<title>Etomon</title>
</head>
<body>
<div class="jumbotron jumbotron-fluid hero" id="hero">
<div class="container">
<div class="row">
<div class="col-12 col-md-7 mb-4 book">
<img src="./images/book.png" class="book">
<h1 class="logo h2 text-light">Etomon</h1>
</div>
<div class="col search">
<input type="text" class="" placeholder="Search?">
<button type="submit">Submit</button>
<form>
subject/course <br>
<input type="text" placeholder="Graphic Design"> <br> level <br>
<input type="text" placeholder="Intermediate"> <br> starting <br>
<input type="text" placeholder="mm/dd/yyyy"> <br> ending <br>
<input type="text" placeholder="mm/dd/yyy"> <br>
<button type="submit">Submit</button>
</form>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col">
<h1 class="popular text-center">Most Popular Subjects</h1>
</div>
</div>
</div>
</body>
</html>我想在 div 中添加一个带有 .jumbotron 类的图像轮播，使其看起来与此屏幕截图相似。
您可以在 css 中看到我有一个 id 为 #hero 的 div 抓取背景图像。当我尝试复制w3s Bootstrap carousel 时，我最终会看到轮播位于我的内容之上。我如何将它保存在那个 jumbotron 中？
【问题讨论】：
【参考方案1】：您可以执行以下操作。#carousel 是绝对定位的，并被拉伸以填充 jumbotron 的区域。为了完成这项工作，jumbotron 得到了明确的position: relative。最后.carousel-inner 和.carousel-item 将它们的高度设置为100% 以填充空间。 （由于.carousel-item 现在是仅背景，它必须有一个设定的高度。）
#hero
position: relative;
#carousel
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
.carousel-inner,
.carousel-item
height: 100%;
.carousel-item
background: no-repeat center/cover;
.book
height: 100px;
width: 100px;
bottom: 9vh;
<div class="jumbotron jumbotron-fluid hero" id="hero">
<div class="container">
<!-- Here is the carousel, `position:absolute` -->
<div id="carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active" style="background-image:url('https://picsum.photos/1280/710')"></div>
<div class="carousel-item" style="background-image:url('http://via.placeholder.com/1280x710/adeee3/ffffff?text=Another+image')"></div>
</div>
</div>
<div class="row">
<div class="col-12 col-md-7 mb-4 book">
<img src="./images/book.png" class="book">
<h1 class="logo h2 text-light">Etomon</h1>
</div>
<div class="col search">
<input type="text" class="" placeholder="Search?">
<button type="submit">Submit</button>
<form>
subject/course <br>
<input type="text" placeholder="Graphic Design"> <br> level <br>
<input type="text" placeholder="Intermediate"> <br> starting <br>
<input type="text" placeholder="mm/dd/yyyy"> <br> ending <br>
<input type="text" placeholder="mm/dd/yyy"> <br>
<button type="submit">Submit</button>
</form>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col">
<h1 class="popular text-center">Most Popular Subjects</h1>
</div>
</div>
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>【讨论】：
以上是关于使用 Bootstrap 4 jumbotron 类时的图像轮播的主要内容，如果未能解决你的问题，请参考以下文章
如何在 Bootstrap 5 中创建 jumbotron？
我如何在dash bootstrap中对齐jumbotron中的徽标标题和段落
html Bootstrap-Powered HTML：基本的bootstrap布局示例，包含导航栏，jumbotron，容器，行，列