Question

我正在使用Bootstrap作为图像轮播。我在旋转木马内有1个图像，但图像未显示（其大小设置为0x0，而使用Chrome开发者工具时自然尺寸正确）。

＆＃13;

.imageSection {
  position: relative;
  display: inline-block;
  margin:0 auto;
  background: red;
  padding: 0px;
}

＆＃13;

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

＆＃13;

我很确定我错过了什么。感谢任何关于此的帮助！

Answer 1

您需要将active添加到一个项目<div class="item active">

来自bootstraps文档http://getbootstrap.com/javascript/#carousel

需要初始有效元素 .active类需要添加到其中一个幻灯片中。否则，轮播将不可见。

Answer 2

我更改了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>

图像未显示在Bootstrap 3 Carousel内

2 个答案: