,可以通过以下步骤实现:
<div>
元素来包裹它们。例如:<div class="item">
<img src="image.jpg" alt="Image">
<div class="caption">
<h3>标题</h3>
<p>描述文本</p>
</div>
</div>
text-center
类将文本居中对齐,使用img-responsive
类使图像自适应父容器的大小。示例CSS样式如下:.item {
position: relative;
}
.caption {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: #fff;
}
<div id="carousel-example" class="carousel slide" data-ride="carousel">
<!-- 轮播项目 -->
<div class="carousel-inner">
<div class="item active">
<!-- 第一个项目 -->
<img src="image1.jpg" alt="Image 1">
<div class="caption">
<h3>标题 1</h3>
<p>描述文本 1</p>
</div>
</div>
<div class="item">
<!-- 第二个项目 -->
<img src="image2.jpg" alt="Image 2">
<div class="caption">
<h3>标题 2</h3>
<p>描述文本 2</p>
</div>
</div>
<!-- 其他项目 -->
</div>
</div>
$(document).ready(function() {
$('#carousel-example').carousel();
});
这样,就可以在Bootstrap 3的多项目转盘中将文本放在图像上了。根据实际需求,可以添加更多的项目,并根据需要进行样式调整和定制。
腾讯云相关产品和产品介绍链接地址:
请注意,以上链接仅为示例,具体产品选择应根据实际需求和情况进行评估和决策。
领取专属 10元无门槛券
手把手带您无忧上云