Simple Bootstrap Carousel

我需要一个简单的引导程序传送带给我的网站。我找到了上面的代码。然而，旋转木马的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

帮助？我不明白为什么它看起来像这样？

来源

2016-06-21 Benjamin Jones

您遇到的问题是什么？它看起来和我所预期的一样。 – Capo

它在工作吗？你怎么了？ https://jsfiddle.net/sdc9cpga/ – CMedina

我在这里可以想到的唯一问题是，可能是图像不存在于指定的路径。 –

影像不是定义： jsfiddle.net/sdc9cpga

来源

2016-06-21 20:07:40

转盘高度由图像确定的，与您的代码，我在路径中添加图像和它工作得很好。否则，请在此处添加一个定义的高度：.carousel-inner> .item> img

来源

2016-06-21 20:08:32 Rob

Simple Bootstrap Carousel

回答

相关问题