引導旋轉木馬空白

每當一個新的幻燈片進入旋轉木馬，它在它下一個白色的小空間，它的幻燈片，當它到達中間的休息區，它很快擊落解決它應該。白色空間似乎只有10-15px，但它發生在每張幻燈片上。引導旋轉木馬空白

我使用與引導默認的旋轉木馬。這是我的代碼，不知道這裏或其他地方是否有問題。

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

來源

2016-04-06 jimps

你可以提供一個小提琴？ –

嘗試限定height屬性，或者使用overflow：

#theCarousel { 
    overflow-y: hidden; 
}

來源

2016-04-06 07:22:21

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

來源

2016-04-06 08:25:59

原來這是圖像尺寸的組合（使它們都具有相同的尺寸）和

margin-top: -.75em;

styles.css文件中的210

。感謝你們。

來源

2016-04-07 00:07:31 jimps

你可能想嘗試改變Twitter的引導代碼.carousel-inner { overflow: hidden; }到.carousel-inner { overflow: visible; }。這消除了在iPhone上過渡期間顯示的空白區域。出於某種原因，我只在手機上遇到問題，而不是在我的MacBook /筆記本電腦屏幕上。

來源

2017-09-18 04:15:46

引導旋轉木馬空白

回答

相關問題