Bootstrap Carousel提升图像并放回

vc6uscn9 于 2022-12-07 发布在 Bootstrap

关注(0)|答案(3)|浏览(153)

我正在做一个 Bootstrap 轮播，它除了一点之外都能正常工作。每当幻灯片改变时，新幻灯片的高度是旧幻灯片的两倍。当幻灯片被激活时，图像会下降到正确的位置。
这是我得到的。

<div id="carousel-id" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
            <li data-target="#carousel-id" data-slide-to="0" class="active"></li>
            <!-- <li data-target="#carousel-id" data-slide-to="1" class=""></li> -->
        </ol>
        <div class="carousel-inner">
            <div class="item active">
                <img alt="First slide" src="images/surf2.png" style="margin-left: auto; margin-right: auto; padding-top: 15px;">
                <div class="container" style="text-align: center;">
                    <h1>One Microsoft Story for Healthcare</h1>
                    <p><a href="#" >Connect ></a> &nbsp<a href="#" >Request a Demo ></a>  </p>
                </div>
            </div>
             <div class="item">
                 <img alt="First slide" src="images/tablet2.png" style="padding-top: 15px; margin-left: auto; margin-right: auto;">
                 <div class="container" style="text-align: center;">
                     <h1>One Microsoft Story for Healthcare</h1>
                     <p><a href="#" >Connect ></a> &nbsp<a href="#" >Request a Demo ></a>  </p>
                 </div>
            </div>
        </div>

        <a class="left carousel-control" href="#carousel-id" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
        <a class="right carousel-control" href="#carousel-id" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
    </div>

twitter-bootstrap

来源：https://stackoverflow.com/questions/32913007/bootstrap-carousel-raising-images-and-dropping-back-down

3条答案

按热度按时间

bjg7j2ky1#

我也遇到了同样的问题，删除“幻灯片”类似乎对我很有效。

赞(0）回复(0）举报 2022-12-07

w8biq8rn2#

BGiezen的答案是好的，但请尝试在删除“slide”后添加“carousel-fade”
看起来好多了。
单击此处查看文档

赞(0）回复(0）举报 2022-12-07

aiazj4mn3#

将顶部位置从0更改为10px ...

.carousel-inner > .next,
.carousel-inner > .prev {
    position: absolute;
    top: 10px;
    width: 100%;
}

赞(0）回复(0）举报 2022-12-07

我来回答

Bootstrap Carousel提升图像并放回

3条答案

相关问题

热门标签

最新问答