轮播幻灯片故障

Question

我正在制作轮播，遇到了一个小故障，以前从未遇到过。当它滑到下一个项目上时，进入的内容与底部对齐，然后当它完全进入视口时，它就会出现。无法弄清楚我在这方面的错误。此外，如果有人能说出为什么会发生这种情况，那也将不胜感激。

<div class="container-fluid">
<div id="test-car" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#test-car" data-slide-to="0" class="active"></li>
<li data-target="#test-car" data-slide-to="1"></li>
<li data-target="#test-car" data-slide-to="2"></li>
</ol>
<div class="container">
<div class="carousel-inner">
<div class="carousel-item active clearfix">
<img class="dp float-left" src="images/5.jpg" alt="First slide">
<div class="test-bod">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum, veniam quis totam obcaecati beatae et consequuntur dolores. ipsum dolor sit amet consectetur adipisicing elit</p>
<footer class="blockquote-footer">
<p>ABC</p>
<p class="small">Designation</p>
</footer>
</div>
</div>
<div class="carousel-item clearfix">
<img class="dp float-left" src="images/6.jpg" alt="First slide">
<div class="test-bod">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum, veniam quis totam obcaecati beatae et consequuntur dolores. ipsum dolor sit amet consectetur adipisicing elit</p>
<footer class="blockquote-footer">
<p>DEF</p>
<p class="small">Designation</p>
</footer>
</div>
</div>
<div class="carousel-item clearfix">
<img class="dp float-left" src="images/7.jpg" alt="First slide">
<div class="test-bod">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum, veniam quis totam obcaecati beatae et consequuntur dolores. ipsum dolor sit amet consectetur adipisicing elit</p>
<footer class="blockquote-footer">
<p>GHI</p>
<p class="small">Designation</p>
</footer>
</div>
</div>
</div>
</div>
</div>
</div>

这是我的 CSS

#test-car {
height: 300px;
background: #518ff5 url('icons/1.svg') no-repeat right;
overflow: hidden;
}
#test-car .container {
position: relative;
top: 25%;
}
.carousel-inner {
height: 100%;
}
.carousel-item {
position: relative;
height: 175px;
}
.dp {
border-radius: 50%;
height: 125px;
width: 125px;
}
#test-car .carousel-inner .carousel-item .test-bod {
position: absolute;
top: 0%;
width: 70%;
margin: 0 15% !important;
font-size: 1.25rem;
color: white;
height: 100%;
}

/* #test-car .carousel-inner .carousel-item footer {
position: absolute;
bottom: 0;
left: 13%;
} */
#test-car .carousel-inner .carousel-item footer p {
position: relative;
margin-bottom: 0;
color: white;
}
.blockquote-footer:before {
content: none;
}

Answer 1

删除该类

.carousel-item {
position: relative;
height: 175px;
}