引导轮播空白答案

【问题标题】：Bootstrap Carousel white space引导轮播空白
【发布时间】：2017-09-18 12:34:09
【问题描述】：

每当有新的幻灯片进入 Carousel 时，它的下方都会有一个小的空白区域，当它滑动到中间的休息区时，它会迅速向下射击以安放在应有的位置。空白似乎只有大约 10-15 像素，但它发生在每张幻灯片上。

我正在使用带有 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>

【问题讨论】：

你能提供一个小提琴吗？

标签： jquery html twitter-bootstrap

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

#theCarousel {
  overflow-y: hidden;
}

【讨论】：

【解决方案3】：

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

margin-top: -.75em;

在styles.css 文件中。谢谢各位。

【讨论】：

【解决方案4】：

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

【讨论】：