간단한 부트 스트랩 캐 러셀

내 웹 사이트에 간단한 부트 스트랩 캐 러셀이 필요합니다. 위 코드를 발견했습니다. 그러나 회전 목마의 CSS 높이가 문제인 것처럼 보입니다. 아래 코드는 웹 사이트의 예에서 같은 코드 :간단한 부트 스트랩 캐 러셀

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

간단한 부트 스트랩 캐 러셀

답변

관련 문제