Html Bootstrap Carousel 图像以外的其他内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11914716/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap Carousel other content than image
提问by Dan-De-Man
I want to use the twitter bootstrap carousel in a personal project. So far it works really well because I use the example of the bootstrap homepage.
我想在个人项目中使用 twitter bootstrap carousel。到目前为止，它运行得非常好，因为我使用了引导程序主页的示例。
Now I want to place simple html content instead of images there. This content should then rotate same way as the pictures. The text I put in is shown in the carousel-caption and text I put in the carousel caption is not being displayed.
现在我想在那里放置简单的 html 内容而不是图像。然后，此内容应以与图片相同的方式旋转。我输入的文本显示在轮播标题中，而我输入的文本未显示在轮播标题中。
Example:
例子：
<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>
Is there a way to get this work? Perhaps theres is a way to declare a white span with say 300 x 300 px where i can place some content.
有没有办法得到这项工作？也许有一种方法可以声明一个白色的跨度，比如 300 x 300 像素，我可以在其中放置一些内容。
You should know that I at a beginner level. I am now learning html, css, js, mongodb, bootstrap, node.js. But this is a little to much for me now.
你应该知道我是初学者。我现在正在学习 html、css、js、mongodb、bootstrap、node.js。但这对我来说有点太多了。
many thanks Daniel
非常感谢丹尼尔
回答by GLES
<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>
If you have replaced html/css from carousel and are not able to correct it, get back the original stuff. Then slowly start replacing with your code, and be very careful with the following css-attributes, they not only help to find errors (like the most useful css borders), but they also help to stop new content that is added, from bloating previous one (max width/height css attributes).
如果您已经从轮播中替换了 html/css 并且无法更正它，请取回原始内容。然后慢慢开始替换你的代码，并非常小心地使用以下 css 属性，它们不仅有助于发现错误（如最有用的 css 边框），而且它们还有助于阻止添加的新内容，避免以前的膨胀一（最大宽度/高度 css 属性）。
Pay close attention to the following css-attributes:
请密切注意以下 css 属性：
min-width:150px;
min-height:100px;
max-width:200px;
max-height:100px;
overflow:hidden;
border:1px solid red;
Do not modify the z-indexes and opacity first work with the ones I have given above and then start doing complex stuff, ask again if you have some doubt and sorry for typos I have less time.
不要修改 z-indexes 和 opacity，首先使用我上面给出的那些，然后开始做复杂的事情，如果你有一些疑问，再问一次，对错别字抱歉，我没有时间。
回答by schmijos
The carousel-captionclass is bad for you. Don't use it if you don't want to show pictures and you're fine. It's even semantically wrong to define your html content as a caption. Just leave the class away and use a plain div
这carousel-caption门课对你不利。如果您不想显示图片，请不要使用它并且您很好。将 html 内容定义为caption甚至在语义上是错误的。离开课堂并使用普通的div
<div>
<h4>Thumbnail label</h4>
<p>Carousel caption text<p>
</div>
Also these smooth shadows will disappear then. And thats good, since we don't want them on pure text (although they may look nice on pictures).
然后这些平滑的阴影也会消失。这很好，因为我们不希望它们出现在纯文本上（尽管它们在图片上看起来不错）。
回答by schmijos
@GLES there is a very simple method to use carousel without any image. Actually the position property of .carousel-captionwas causing the problem. Simply set it to static
@GLES 有一种非常简单的方法可以在没有任何图像的情况下使用轮播。实际上.carousel-caption的位置属性导致了问题。只需将其设置为静态
.carousel-caption { position:static; }
Here is the demo for that
这是演示
回答by Pigueiras
You didn't close the carousel-captiondiv. Probably is your problem. If you look at the documentation of bootstrap carousel, there is no different between using images or text inside each item.
你没有关闭carousel-captiondiv。可能是你的问题。如果您查看 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">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
Look at the behaviour of this code in jsfiddle: http://jsfiddle.net/QYFa2/
在jsfiddle中查看这段代码的行为：http: //jsfiddle.net/QYFa2/
回答by user2957535
Rondell may be a jQuery plugin for displaying galleries and different content the approach you wish.
Rondell 可能是一个 jQuery 插件，用于以您希望的方式显示画廊和不同的内容。
View Demoi have use this plugin its quite easy to use ,download Source Code
回答by Elik Jafaroff
Just delete carousel-captionclass and everything will be great
只需删除轮播字幕类，一切都会很棒
