【发布时间】：2020-03-18 18:04:12
【问题描述】：
我试图完成图像中的滑块。我也使用了 Bootstrap 轮播，但图像大小总是不同，左边的文本在顶部跳到它所属的位置。
左侧的文本（长文本）与滑块一起来回跳跃，直到它到达正确的位置。 About Us 和 Who are we，已从滑块中排除。
任何人有完成这样一个旋转木马/滑块的想法？
body,
html {
height: 100%;
background: #232c41;
}
.bg {
background: #3f9aa6;
}
.navbar-brand {
margin-left: 50px;
}
.ml-right {
margin-right: 50px;
}
.mid_bar {
background: #39435d;
}
.nav-link {
color: #e7ffff;
font-family: "Titillium Web", sans-serif;
font-weight: bold;
text-transform: uppercase;
font-size: 18px;
margin-top: 10px;
margin-bottom: auto;
margin-left: 30px;
margin-right: 30px;
}
.nav-link:hover {
color: #e7ffff;
}
.space {
margin-left: 20px;
margin-right: auto;
}
.d-flex {
justify-content: center;
align-items: center;
}
.carousel-item {
height: 100vh;
min-height: 350px;
background: no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.rd_bottom_right {
position: fixed;
margin-top: 25%;
margin-right: 35%;
}
.rd_bottom_left {
position: relative;
margin-top: 30%;
margin-left: 35%;
}
.rd_au {
padding-top: 5%;
width: 20%;
position: relative;
line-height: 1px;
margin-left: 50px;
text-transform: uppercase;
font-family: "Titillium Web", sans-serif;
font-weight: bold;
color: #e7ffff;
z-index: 999;
}
.rd_wwa {
margin-left: 50px;
width: 10%;
position: relative;
letter-spacing: 0.3em;
text-transform: uppercase;
font-family: "Titillium Web", sans-serif;
color: #fdbc4a;
z-index: 998;
}
.ruttery {
width: 40%;
letter-spacing: 0.2em;
font-family: "Titillium Web", sans-serif;
font-size: 14px;
color: #e7ffff;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>RD - Raining Dreams</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="main.css" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous" />
<body>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<!-- top bar -->
<nav class="navbar navbar-expand-md bg">
<img class="navbar-brand" src="img/logo.png" alt="">
<form class="form-inline ml-auto ml-right">
<input class="form-control" type="text" placeholder="Search" aria-label="Search">
</form>
</nav>
<!-- actually the navbar -->
<nav class="navbar navbar-expand-md mid_bar">
<button class="navbar-toggler navbar-dark" type="button" data-toggle="collapse" data-target="#main-navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse d-flex" id="main-navigation">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Forum</a>
</li>
<img class="navbar-brand space" src="img/mid_logo.png" alt="">
<li class="nav-item">
<a class="nav-link" href="#news">News</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#server">Server</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#gallery">Gallery</a>
</li>
</ul>
</nav>
<!-- slider -->
<div id="rd_slider_full" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<!-- Slide One - Set the background image for this slide in the line below -->
<div class="carousel-item active" style="background-image: url('https://source.unsplash.com/LAaSoL0LrYs/1920x1080')">
<div class="carousel-caption d-none d-md-block">
<h2 class="display-4">First Slide</h2>
<p class="lead">This is a description for the first slide.</p>
</div>
</div>
<!-- Slide Two - Set the background image for this slide in the line below -->
<div class="carousel-item" style="background-image: url('https://source.unsplash.com/bF2vsubyHcQ/1920x1080')">
<div class="carousel-caption d-none d-md-block">
<h2 class="display-4">Second Slide</h2>
<p class="lead">This is a description for the second slide.</p>
</div>
</div>
<!-- Slide Three - Set the background image for this slide in the line below -->
<div class="carousel-item" style="background-image: url('https://source.unsplash.com/szFUQoyvrxM/1920x1080')">
<div class="carousel-caption d-none d-md-block">
<h2 class="display-4">Third Slide</h2>
<p class="lead">This is a description for the third slide.</p>
</div>
</div>
</div>
<a class="carousel-control-prev rd_bottom_left" href="#rd_slider_full" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next rd_bottom_right" href="#rd_slider_full" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
<!-- about us -->
<div class="container-fluid">
<div class="row">
<div class="col">
<h2 class="rd_au">About Us</h2>
<p class="rd_wwa">Who we are</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>【问题讨论】：
-
欢迎使用 Stack Overflow _ 请添加您尝试过的代码，包括 HTML 和 CSS 以及 Bootstrap 的哪个版本（4.3.1？），以便任何试图帮助您的人都可以在本地复制代码，如果他们需要。查看 SO 帮助中心常见问题以获取指南 >>> minimal reproducible example
-
我不确定我是否真正理解您的要求，但我可以告诉您，您的 html 中缺少结束标签，这可能会导致您的布局出现一些问题。
标签： css bootstrap-4 carousel