Bootstrap Carousel white space

Question

Каждый раз, когда в карусель входит новый слайд, он находится под ним под небольшим белым пространством, когда он скользит, когда он добирается до зоны отдыха посередине, он быстро стреляет вниз, чтобы поселиться там, где должен. Белое пространство кажется примерно 10-15px, но это происходит на каждом слайде.

Я использую карусель по умолчанию с 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

Возможно, вы захотите изменить код загрузки Bootstrap .carousel-inner { overflow: hidden; } на номер .carousel-inner { overflow: visible; }. Это избавилось от белого пространства, отображаемого во время перехода на моем iPhone. По какой-то причине у меня была проблема только на моем мобильном телефоне, а не на экране MacBook/ноутбука.