Question

每次有新的幻灯片进入旋转木马时，它在滑动下方有一个小的空白区域，当它到达中间的休息区域时，它会快速向下射击以确定它应该在哪里。白色空间似乎只有大约10-15px，但它发生在每张幻灯片上。

我正在使用默认的Carousel和Bootstrap。这是我的代码，不确定它是否在这里或其他地方有问题。

<div class="row ">
<div class="col-md-12">
    <div class="carousel slide" id="theCarousel"                data-interval="4000">

        <ol class="carousel-indicators">
            <li data-target="#theCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#theCarousel" data-slide-to="1"></li>
            <li data-target="#theCarousel" data-slide-to="2"></li>
            <li data-target="#theCarousel" data-slide-to="3"></li>
        </ol>

        <div class="row">
            <div class="carousel-inner">
                <div class="item active">
                    <img src="img/berwick5.jpg" alt="1" class="img-responsive"/>
                </div>
                <div class="item ">
                    <img src="img/pic3_e.jpg" alt="2" class="img-responsive"/>
                </div>
                <div class="item ">
                    <img src="img/pic1_e.jpg" alt="3" class="img-responsive"/>
                </div>
                <div class="item ">
                    <img src="img/pic2_e.jpg" alt="4" class="img-responsive"/>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

尝试定义height属性，或使用overflow：

#theCarousel {
  overflow-y: hidden;
}

Answer 2

<div class="container">
    <div class="span8">
        <div id="theCarousel" class="carousel slide">
            <ol class="carousel-indicators">
                <li data-target="#theCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#theCarousel" data-slide-to="1" class=""></li>
                <li data-target="#theCarousel" data-slide-to="2" class=""></li>
                <li data-target="#theCarousel" data-slide-to="3" class=""></li>
            </ol>
            <div class="carousel-inner">
                <div class="item active">
                    <img src="img/berwick5.jpg" alt="1" class="img-responsive"/>
                </div>
                <div class="item">
                    <img src="img/pic3_e.jpg" alt="2" class="img-responsive"/>
                </div>
                <div class="item">
                    <img src="img/pic1_e.jpg" alt="3" class="img-responsive"/>
                </div>
                <div class="item ">
                    <img src="img/pic2_e.jpg" alt="4" class="img-responsive"/>
                </div>
            </div>
            <a class="left carousel-control" href="#theCarousel" data-slide="prev">‹</a>
            <a class="right carousel-control" href="#theCarousel" data-slide="next">›</a>
        </div>
    </div>
</div>

Answer 3

原来它是图像尺寸的组合（使它们具有相同的尺寸）和

margin-top: -.75em;

styles.css文件中的

。谢谢你们。

Answer 4

您可能想尝试将Twitter引导代码.carousel-inner { overflow: hidden; }更改为.carousel-inner { overflow: visible; }。这消除了在iPhone上转换过程中显示的空白区域。出于某种原因，我只在手机上出现问题，而不是在我的MacBook /笔记本电脑屏幕上。

Bootstrap Carousel白色空间

4 个答案: