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;
}

轮播幻灯片故障

1 个答案: