3

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

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

1 回答 1

0

删除该类

.carousel-item {
    position: relative;
    height: 175px;
}
于 2018-07-05T17:41:13.250 回答