41

我想在个人项目中使用 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。但这对我来说有点过分了。

非常感谢丹尼尔

4

6 回答 6

42 
<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-indexes 和 opacity，首先使用我上面给出的那些，然后开始做复杂的事情，再次询问您是否有疑问并为错别字抱歉，我的时间较少。

于 2012-08-11T14:09:54.847 回答
14

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

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

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

于 2014-08-27T19:58:58.733 回答
10

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

.carousel-caption { position:static; }

这是演示

演示

于 2014-10-07T15:18:06.887 回答
10

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

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

于 2012-08-11T13:15:34.850 回答
2

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

查看演示我已经使用了这个插件，它很容易使用，下载源代码

于 2013-11-05T18:15:56.053 回答
2

只需删除 carousel-caption类，一切都会很棒

于 2017-11-24T01:16:38.923 回答