Bootstrap Carousel 图片以外的其他内容答案

【问题标题】：Bootstrap Carousel other content than imageBootstrap Carousel 图片以外的其他内容
【发布时间】：2012-08-08 12:37:39
【问题描述】：

我想在个人项目中使用 twitter 引导轮播。到目前为止，它运行得非常好，因为我使用了引导主页的示例。

现在我想在那里放置简单的 html 内容而不是图像。然后，此内容应以与图片相同的方式旋转。我输入的文本显示在 carousel-caption 中，而我输入的 carousel 标题中的文本未显示。

例子：

    <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>

有没有办法完成这项工作？也许有一种方法可以声明一个 300 x 300 像素的白色跨度，我可以在其中放置一些内容。

你应该知道我是初学者。我现在正在学习 html、css、js、mongodb、bootstrap、node.js。但这对我来说有点过分了。

非常感谢丹尼尔

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

您没有关闭 carousel-caption div。可能是你的问题。如果您查看引导轮播的文档，则在每个项目中使用图像或文本没有什么不同。

<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/

【讨论】：

对不起！通过将文本复制到问题中，我丢失了结束标记。我的源代码是有效的。好的，我按照你说的删除了轮播标题，现在我可以看到我输入的文字了。问题是整个网站都失去了它的“形式”。以下元素不会留在原地并破坏布局。有没有办法避免它？谢谢
也许我可以给它一个高度和一个寄宿生之类的东西。

【解决方案2】：

<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>

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

密切关注以下css-attributes：

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

不要修改 z-indexes 和 opacity，首先使用我上面给出的那些，然后开始做复杂的事情，如果你有疑问，再问一次，对不起，我时间不多了。

【讨论】：

你好，尼娜，这太棒了！:-) 正是我想要的。有用。我会稍微修改一下。但现在我想我明白了如何在这个站点中放置我自己的元素，尽管使用引导程序。但那是 css :-) 谢谢！

【解决方案3】：

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

View Demo我用过这个插件，非常好用，下载Source Code

【讨论】：

看来你赶时间，忘记发完整链接了！

【解决方案4】：

carousel-caption 课程对您不利。如果您不想显示图片，请不要使用它，您可以。将 html 内容定义为 caption 在语义上甚至是错误的。离开班级并使用简单的div

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

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

【讨论】：

【解决方案5】：

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

.carousel-caption { position:static; }

这里是那个演示

Demo

【讨论】：

【解决方案6】：

只需删除 carousel-caption 类，一切都会好起来的

【讨论】：