使用Bootstrap 4 jumbotron类时的图像轮播 [英] Image carousel while using Bootstrap 4 jumbotron classes
问题描述
我正在构建一个模型网站，并且能够构建到目前为止的准系统。
I am building a mockup website and was able to build out the barebones so far.
#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 添加图像轮播，以使其具有与此屏幕截图类似的外观。
I want to add an image carousel within the div with the class .jumbotron to give it a similar look to this screenshot.
你可以在css中看到我的div为id #hero 抓取背景图片。当我尝试复制 w3s Bootstrap carousel 时，我的结果是旋转木马高于我的内容。如何将其保留在该超大屏幕内？
You can see in the css I have the div with the id #hero grabbing the background image. When I try to replicate w3s Bootstrap carousel I end up with the carousel being above my content. How do I keep it within that jumbotron?
推荐答案
您可以执行以下操作。
#carousel 绝对定位，并伸展以填充jumbotron的区域。为了使这项工作，jumbotron得到一个明确的位置：relative 。最后 .carousel-inner 和 .carousel-item 将其高度设置为100％以填补空间。 （因为 .carousel-item 现在只有背景，它必须有一个设定的高度。）
You could do something like the one below.
The #carousel is absolutely positioned, and stretched to fill the area of the jumbotron. In order to make this work, the jumbotron got an explicit position: relative. Finally .carousel-inner and .carousel-item has their height set to 100% to fill up the space as well. (As .carousel-item is now background-only, it has to have a set height.)
#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类时的图像轮播的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
