Bootstrap Carousel空白空间

Question

Everytime a new slide comes into the Carousel, it has a small white space under under it as it slides, when it gets to the resting area in the middle, it quickly shoots down to settle where it should. The white space only seems to be about 10-15px, but it happens on every slide.

I am using the default Carousel with Bootstrap. This is my code, not sure if it is having an issue here or elsewhere.

<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

Try defining the height property, or use 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

Turns out it was a combination of image sizes (made them all the same size) and the

margin-top: -.75em;

in the styles.css file. Thank you guys.

Answer 4

You may want to try changing the Twitter Bootstrap code .carousel-inner { overflow: hidden; } .carousel-inner { overflow: hidden; } to .carousel-inner { overflow: visible; } .carousel-inner { overflow: visible; } . This got rid of the white space showing during transition on my iPhone. For some reason, I only had the problem on my mobile phone, not on my MacBook / laptop screen.