如何在Bootstrap旋转木马的一个项目上拥有多个图像

Question

你能告诉我如何在引导转盘的一个.item上加载多个图像吗？

正如你可以从这个演示中看到的，我正在尝试这样的输出

[！[在此输入图像描述][2]][2]

但是图像呈现在彼此之下。

这是我的代码

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="http://www.neverendingtech.com/new/wp-content/uploads/2013/03/businessman.png" alt="">
      <img src="http://www.wallscapeinc.com/images/businessman1.png" alt="">
    </div>
  </div>
</div>

Answer 1

对于您的示例：

/* All images, but not the first */
.carousel-inner > .item img + img {
  position: absolute;
  left: 0;
  top: 0;
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="http://www.neverendingtech.com/new/wp-content/uploads/2013/03/businessman.png" alt="">
      <img src="http://www.wallscapeinc.com/images/businessman1.png" alt="">
    </div>
    <div class="item">
      <img src="http://www.wallscapeinc.com/images/businessman1.png" alt="">
    </div>
  </div>
</div>

Answer 2

您可以按照下面的链接使用引导转盘每次显示一个多图像转盘项目。

http://www.bootply.com/tagged/carousel

http://www.bootply.com/JAHTzGyft6