只有文本的 Bootstrap.js 轮播答案

【问题标题】：Bootstrap.js Carousel with only text只有文本的 Bootstrap.js 轮播
【发布时间】：2014-06-21 08:05:48
【问题描述】：

我按照this 教程制作轮播幻灯片。

当我将每个项目包含图像和段落定义为 -

<div class="item">
    <img src="http://placehold.it/1200x480" alt="" />
    <div class="carousel-caption">
        <p>Caption text here</p>
    </div>
</div>

一切正常 (here its jsFiddle)。

但是当我将它简化为段落时 -

<div class="item">
    <div class="carousel-caption">
        <p>Caption text here</p>
    </div>
</div>

它停止工作 (here its jsFiddle) 。

我怎样才能让它只与段落一起工作，这样每个开关都滑动文本？

【问题讨论】：

您提供的两个链接都可以正常工作，请再次检查
对不起，你是对的。已修复。
嘿我已经解决了你问的问题请查看答案

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

See after removing image and leaving only paragraph

我为项目容器类提供了带有背景颜色的图像的宽度和高度给 div 以指示存在只需将此代码复制并粘贴到小提琴 css 部分并运行以查看更改

.item{
    height:480px;
    width:1200px;
    background-color:orange;
}

【讨论】：

为什么把图片留在 Javascript 范围内？
看到我已经删除了它们

【解决方案2】：

最简单的方法就是制作背景颜色的图像。如果你想要一种更简洁的方式来做这件事，你可以使用 CSS 实现相同的效果。

【讨论】：

【解决方案3】：

.carousel-caption 的 position 属性导致了这个问题，没有图像就会出现问题，所以将其设置为 static：

.carousel-caption{
    position:static;
}

这是它在有和没有图像的情况下工作的演示：

DEMO

【讨论】：