2016-06-21 109 views
0

我需要一個簡單的引導程序傳送帶給我的網站。我找到了上面的代碼。然而,旋轉木馬的CSS高度似乎是問題。該代碼是從實例相同的代碼下面的網站上:Simple Bootstrap Carousel

http://www.tutorialrepublic.com/codelab.php?topic=bootstrap&file=carousel

我有什麼:

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
<meta charset="UTF-8"> 
 
<title>Example of Bootstrap 3 Carousel</title> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<style type="text/css"> 
 
.carousel{ 
 
    background: #2f4357; 
 
    margin-top: 20px; 
 
} 
 
.carousel .item img{ 
 
    margin: 0 auto; /* Align slide image horizontally center */ 
 
} 
 
.bs-example{ 
 
\t margin: 20px; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 
<div class="bs-example"> 
 
    <div id="myCarousel" class="carousel slide" data-ride="carousel"> 
 
     <!-- Carousel indicators --> 
 
     <ol class="carousel-indicators"> 
 
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
 
      <li data-target="#myCarousel" data-slide-to="1"></li> 
 
      <li data-target="#myCarousel" data-slide-to="2"></li> 
 
     </ol> 
 
     <!-- Wrapper for carousel items --> 
 
     <div class="carousel-inner"> 
 
      <div class="item active"> 
 
       <img src="../images/slide1.png" alt="First Slide"> 
 
      </div> 
 
      <div class="item"> 
 
       <img src="../images/slide2.png" alt="Second Slide"> 
 
      </div> 
 
      <div class="item"> 
 
       <img src="../images/slide3.png" alt="Third Slide"> 
 
      </div> 
 
     </div> 
 
     <!-- Carousel controls --> 
 
     <a class="carousel-control left" href="#myCarousel" data-slide="prev"> 
 
      <span class="glyphicon glyphicon-chevron-left"></span> 
 
     </a> 
 
     <a class="carousel-control right" href="#myCarousel" data-slide="next"> 
 
      <span class="glyphicon glyphicon-chevron-right"></span> 
 
     </a> 
 
    </div> 
 
</div> 
 
</body> 
 
</html>         \t \t

幫助?我不明白爲什麼它看起來像這樣?

+0

您遇到的問題是什麼?它看起來和我所預期的一樣。 – Capo

+0

它在工作嗎?你怎麼了? https://jsfiddle.net/sdc9cpga/ – CMedina

+1

我在這裏可以想到的唯一問題是,可能是圖像不存在於指定的路徑。 –

回答

0

影像不是定義: jsfiddle.net/sdc9cpga

0

轉盤高度由圖像確定的,與您的代碼,我在路徑中添加圖像和它工作得很好。否則,請在此處添加一個定義的高度:.carousel-inner> .item> img