使用Bootstrap 4巨型机类时的图像轮播
[英]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>
I want to add an image carousel within the div with the class .jumbotron to give it a similar look to this screenshot. 我想在类中使用.jumbotron类添加div中的图像轮播，以使其类似于此屏幕截图。
You can see in the css I have the div with the id #hero grabbing the background image. 您可以在CSS中看到ID为#hero的div抓取背景图片。 When I try to replicate w3s Bootstrap carousel I end up with the carousel being above my content. 当我尝试复制w3s Bootstrap轮播时，我最终将轮播置于我的内容之上。 How do I keep it within that jumbotron? 我如何将其保存在该超大型飞机内？
1 个解决方案
解决方案1
0 2018-01-21 22:04:06
You could do something like the one below. 您可以执行以下操作。
The #carousel is absolutely positioned, and stretched to fill the area of the jumbotron. #carousel的位置绝对正确，并且已拉伸到可填充巨型飞轮的区域。 In order to make this work, the jumbotron got an explicit position: relative . 为了使这项工作有效，超大飞机获得了明确的position: relative 。 Finally .carousel-inner and .carousel-item has their height set to 100% to fill up the space as well. 最后， .carousel-inner和.carousel-item的高度也设置为100％，以填充空间。 (As .carousel-item is now background-only, it has to have a set height.) （由于.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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.