Javascript 推特引导旋转木马行布局，无幻灯片

我一直在尝试学习和使用twitter引导，尤其是旋转木马元素。为此，我成功地复制了文档中的示例，一切似乎都很好，正如预期的那样。我的示例HTML旋转木马代码位于：

然而，我想做的是，告诉bootstrap不要制作幻灯片，而是在一行中显示所有三张（有多少张）图像-类似于亚马逊展示其产品的方式。我已经阅读了文档，但不知道如何才能做到这一点

---

如果您有任何想法和指导，我们将不胜感激。谢谢。

根据我过去使用bootstrap的经验，我使用了这种HTML结构。所以我相信你可以在一张幻灯片中加载多张图片。。。如下图所示

<div class="carousel">
      <div class="carousel-inner">

    <!-- your slide -->
         <div class="item active">
                <div class="product">
                    <img src="" alt="" />
                    <p>this is a caption</p>
                </div>
                <div class="product">
                    <img src="" alt="" />
                    <p>this is a caption</p>
                </div>
                <div class="product">
                    <img src="" alt="" />
                    <p>this is a caption</p>
                </div>

         </div> 
    <!-- end slide -->

    <!-- your slide -->
         <div class="item">
                <div class="product">
                    <img src="" alt="" />
                    <p>this is a caption</p>
                </div>
                <div class="product">
                    <img src="" alt="" />
                    <p>this is a caption</p>
                </div>
                <div class="product">
                    <img src="" alt="" />
                    <p>this is a caption</p>
                </div>
         </div> 
    <!-- end slide -->

      </div>

</div>

这里的问题是，您的标题位于项目容器的底部。所以你只能看到一个原因是因为位置：绝对；让它们彼此重叠。因此，对于您的情况，您很可能需要调整此CSS以获得所需的内容

另请注意：如果您不想更改twitter引导CSS，您可以在body标记中添加一个类，并使用伪类覆盖引导CSS

如何使图像以列显示：

要制作图像列，您可以使用类似的结构

HTML

<!-- product one -->
<div class="product-container">
    <img src="" alt="" />
    <div class="carousel-caption">
        <h4>Something For Sale</h4>
       <p>Some description</p>
    </div>
</div>


<!-- product two -->
<div class="product-container">
    <img src="" alt="" />
    <div class="carousel-caption">
        <h4>Something For Sale</h4>
       <p>Some description</p>
    </div>
</div>


<!-- product three -->
<div class="product-container">
    <img src="" alt="" />
    <div class="carousel-caption">
        <h4>Something For Sale</h4>
       <p>Some description</p>
    </div>
</div>

---

不管怎么说，这会让你进入球场的。。。可能需要调整一下。

如果这是一个愚蠢的问题，很抱歉，但我对你的问题有点困惑。那么您希望在一张幻灯片中加载多个图像？对吗？@Krisholenbeck，对，对。例如，类似于amazon.com在其登录页面的末尾所做的事情。因此，将显示多个图像以及它们各自的标题（而不是幻灯片）。我基于直觉尝试了这一点。但是，它不起作用。当您这样做时，第二个图像出现在第一个图像的底部，并且字幕也不起作用（如何在同一个div“item active”下指定两个字幕）？请参阅我的代码：我在这里使用了twitters示例。嗯。。。好的，我先把它摆弄一下，然后再给你打电话。还有，图像有多大？堆叠很可能是因为CSS问题，或者图像对于容器来说太大。至于标题，我会看看这是否是插件的问题。谢谢克里斯的帮助。我计划使用相当小的图片（示例：），但目前我只是使用twitter示例来模拟这些示例。理想情况下，我想加载5张这样的图片，并附上它们的标题。好的。。。一旦你调整了字幕和图片的CSS。它们应该能够在物品容器中正确地显示和适应……克里斯，你如何让图像以“行”而不是“列”的方式排列？目前，第二个图像位于第一个图像的下方，而不是其旁边。

<!-- product one -->
<div class="product-container">
    <img src="" alt="" />
    <div class="carousel-caption">
        <h4>Something For Sale</h4>
       <p>Some description</p>
    </div>
</div>


<!-- product two -->
<div class="product-container">
    <img src="" alt="" />
    <div class="carousel-caption">
        <h4>Something For Sale</h4>
       <p>Some description</p>
    </div>
</div>


<!-- product three -->
<div class="product-container">
    <img src="" alt="" />
    <div class="carousel-caption">
        <h4>Something For Sale</h4>
       <p>Some description</p>
    </div>
</div>

.product-container {
   width:33%;
   float:left;
}

.product-container img {
  margin:0 auto 0 auto;
}