Question

我正在构建一个模型网站，并且能够构建到目前为止的准系统。

#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时，我最终将旋转木马放在我的内容之上。我怎么把它放在那个超大屏幕里呢？

Answer 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类时的图像轮播

1 个答案: