2017-05-07 182 views
0

我正在使用引導程序傳送圖像傳送帶。旋轉木馬內部有1張圖片,但圖片未顯示(其大小設置爲0x0,而使用Chrome開發人員工具時自然大小正確)。圖像不顯示在引導程序3傳送​​帶內

.imageSection { 
 
    position: relative; 
 
    display: inline-block; 
 
    margin:0 auto; 
 
    background: red; 
 
    padding: 0px; 
 
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="imageSection"> 
 
     <div class="carousel slide" id="imageCarousel" data-interval="false"> 
 
     <div class="carousel-inner"> 
 
      <div class="item"><img src="http://www.clker.com/cliparts/r/0/O/0/X/O/image-of-person-sspeck-hi.png"> 
 
      </div> 
 
     </div> 
 
     </div> 
 
</div>

我敢肯定,我失去了一些東西。感謝有關此任何幫助!

回答

1

您需要添加active正好一個項目<div class="item active">

從白手起家文檔http://getbootstrap.com/javascript/#carousel

初始有源元件所需 的。主動類需要被添加到幻燈片之一。否則,傳送帶將不可見。

0

我改變了cdn鏈接,看起來您提供的cdn鏈接已損壞。

Plunkr鏈接:https://plnkr.co/edit/Tm2eXNeACc1JiMef74SA?p=preview

<!DOCTYPE html> 
<html> 

    <head> 

    <!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 

<!-- Optional theme --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 

<!-- Latest compiled and minified JavaScript --> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
    <link rel="stylesheet" href="style.css"> 
    <script src="script.js"></script> 

    </head> 

    <body> 

<div class="imageSection"> 
     <div class="carousel slide" id="imageCarousel" data-interval="false"> 
     <div class="carousel-inner"> 
      <div class="item active"><img src="http://www.clker.com/cliparts/r/0/O/0/X/O/image-of-person-sspeck-hi.png"> 
      </div> 
     </div> 
     </div> 
</div> 
    </body> 

</html>