Dan*_*Man 37 html css twitter-bootstrap
我想在个人项目中使用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. 但现在这对我来说有点太多了.
非常感谢丹尼尔
GLE*_*LES 40
<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索引和不透明度首先使用我上面给出的那些,然后开始做复杂的东西,再次询问你是否有疑问并抱歉打字错误我没有时间.
sch*_*jos 11
这carousel-caption堂课对你不好.如果你不想显示照片而你没事,请不要使用它.将html内容定义为标题甚至在语义上都是错误的.离开班级,使用平原div
<div>
<h4>Thumbnail label</h4>
<p>Carousel caption text<p>
</div>
这些平滑的阴影也将消失.这很好,因为我们不希望它们在纯文本上(尽管它们在图片上看起来很漂亮).
你没有关闭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>
在jsfiddle中查看此代码的行为:http://jsfiddle.net/QYFa2/
小智 8
@GLES有一个非常简单的方法来使用没有任何图像的轮播.实际上.carousel-caption的位置属性导致了这个问题.只需将其设置为静态即可
.carousel-caption { position:static; }
这是演示
| 归档时间： |
|
| 查看次数： |
60599 次 |
| 最近记录： |