javascript - twitter bootstrap 旋转木马行布局，无幻灯片

Question

我一直在尝试学习和使用 twitter bootstrap，尤其是轮播元素。为此，我设法复制了文档中的示例，一切看起来都很好——按预期工作。我的示例 HTML 轮播代码位于:http://dpaste.com/772419/

但是，我想做的是，告诉 bootstrap 不要制作幻灯片，而是在一行中显示所有三个(有多少个)图像 - 类似于亚马逊展示其产品的方式。我已阅读文档，但无法弄清楚如何做到这一点。

任何想法，指导将不胜感激。谢谢。

Answer 1

根据我过去使用 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>

基本上每个带有 ITEM 标签的 DIV 都是一张幻灯片。 ACTIVE 确定第一张幻灯片。

编辑

好的，所以我在本地稍微弄乱了它，试图重现您的问题。看起来标题问题很可能来自 bootstrap.css 文件中的 CSS。这是代码...

.carousel-caption {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 10px 15px 5px;
background: #333;
background: rgba(0, 0, 0, 0.75);
}

这里的问题是您的标题位于项目容器的底部。所以你只能看到一个的原因是因为 position:absolute;使它们彼此重叠。因此，对于您的情况，您很可能需要调整此 CSS 以获得您正在寻找的内容。

另请注意:如果您不想更改 Twitter Bootstrap CSS，您可以将一个类添加到您的正文标记并使用伪类来覆盖 Bootstrap 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>

CSS

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

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

无论如何，这应该会让你进入球场......它可能需要稍微调整一下。