Bootstrap Carousel其他内容比图片 [英] Bootstrap Carousel other content than image
问题描述
我想在个人项目中使用twitter bootstrap carousel。
到目前为止，它的工作原理很好，因为我使用的例子bootstrap首页。
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.
现在我想放置简单的html内容，而不是图像。
这个内容应该像图片一样旋转。
我输入的文本显示在旋转木马字幕中，我放在轮播字幕中的文本没有显示。
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.
示例：
<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像素，我可以放置一些内容。
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.
你应该知道我在初学者水平。我现在学习html，css，js，mongodb，bootstrap，node.js.
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.
推荐答案
方案
<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属性）。
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).
请注意以下css属性：
Pay close attention to the following css-attributes:
min-width:150px;
min-height:100px;
max-width:200px;
max-height:100px;
overflow:hidden;
border:1px solid red;
不要修改z-index和不透明度，首先使用上面给出的那些，然后开始做复杂的东西，再问，如果你有一些疑问，对不起打字错过我有更少的时间。
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.
这篇关于Bootstrap Carousel其他内容比图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
