1

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

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

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

4

1 回答 1

2

根据我过去使用引导程序的经验，我使用过这种 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 引导 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>

CSS

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

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

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

于 2012-07-19T00:25:31.230 回答