Question

我想在个人项目中使用twitter bootstrap carousel。到目前为止，它的效果非常好，因为我使用了bootstrap主页的示例。

现在我想在那里放置简单的html内容而不是图像。然后，此内容应与图片一样旋转。我输入的文字显示在旋转木马标题中，我放入旋转木马标题的文字没有显示。

示例：

    <div class="item">
        This is the text or html code i want to place
        <div class="carousel-caption">
            <h4>Thumbnail label</h4>
            <p>Carousel caption text<p>
        </div>
    </div>

有没有办法让这项工作？也许theres是一种宣称白色跨度的方式，例如300 x 300 px，我可以放置一些内容。

你应该知道我处于初级水平。我现在正在学习html，css，js，mongodb，bootstrap，node.js.但现在这对我来说有点太多了。

非常感谢丹尼尔

Answer 1

<head>
  <style type="text/css">
    div.new_html_code {
      width:150px;
      height:100px;
      min-width:150px;
      min-height:100px;
      max-width:200px;
      max-height:100px;
      overflow:hidden;
      display:block;
      border:1px solid red;
    }
  </style>
</head>
<body>
<!--
some html stuff here, I am just giving the basic layout
-->
    <div class="item">
        <div class="new_html_code"></div>
        <div class="carousel-caption">
            <h4>Thumbnail label</h4>
            <p>Carousel caption text<p>
        </div>
    </div>
</body>

如果您已从转盘中替换html / css并且无法更正它，请取回原始内容。然后慢慢开始用你的代码替换，并且对以下css属性非常小心，它们不仅有助于找到错误（比如最有用的css边框），而且它们还有助于阻止添加的新内容，从之前膨胀一（最大宽度/高度css属性）。

密切注意以下css属性：

      min-width:150px;
      min-height:100px;
      max-width:200px;
      max-height:100px;
      overflow:hidden;
      border:1px solid red;

不要修改z索引和不透明度首先使用我上面给出的那些，然后开始做复杂的事情，再次询问你是否有疑问并抱歉打字错误我没有时间。

Answer 2

carousel-caption课对你不利。如果你不想显示照片而且你没事，就不要使用它。将html内容定义为标题甚至在语义上都是错误的。只需离开课堂并使用普通div

<div>
    <h4>Thumbnail label</h4>
    <p>Carousel caption text<p>
</div>

这些平滑的阴影也会消失。这很好，因为我们不希望它们出现在纯文本上（尽管它们在图片上看起来不错）。

Answer 3

您没有关闭carousel-caption div。可能是你的问题。如果你看一下bootstrap carousel的文档，在每个项目中使用图像或文本之间没有区别。

<div id="myCarousel" class="carousel slide">
   <!-- Carousel items -->
   <div class="carousel-inner">
     <div class="active item"><p>1</p></div>
     <div class="item"><p>2</p></div>
     <div class="item"><p>3</p></div>
   </div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>

在jsfiddle：http://jsfiddle.net/QYFa2/

中查看此代码的行为

Answer 4

@GLES有一个非常简单的方法来使用没有任何图像的轮播。实际上 .carousel-caption 的位置属性导致了问题。只需将其设置为 static

即可

.carousel-caption { position:static; }

以下是

的演示

Demo

Answer 5

Rondell可能是一个jQuery插件，用于显示画廊和不同内容的方法。

View Demo我使用此插件非常容易使用，请下载Source Code

Answer 6

只需删除轮播字幕类，一切都会很棒

Bootstrap Carousel其他内容比图像

6 个答案: