Bootstrap怎么让轮播图Carousel的文字显示在图片下方-Bootstrap教程-PHP中文网

应将文字从.carousel-item内部移出，置于.carousel-inner外部作为独立区块，并通过slid.bs.carousel事件监听动态更新内容，确保图文同步。

bootstrap怎么让轮播图carousel的文字显示在图片下方

Carousel 文字默认在图片上方，怎么移到下方？

Bootstrap 的 carousel-caption 默认绝对定位在图片中央偏上区域，不是“下方”。所谓“图片下方”，实际是指轮播图容器底部、图片区域之外的独立文字区——这需要脱离默认 caption 的定位逻辑，手动重构布局。

关键不是调 top / bottom，而是把文字从 .carousel-item 内部的覆盖层，挪到图片容器外、作为独立区块渲染。

不要用 carousel-caption 做“下方文字”，它天生是叠加层，强行 bottom: 0 容易被裁剪或响应式错位
把文字放在 .carousel-inner 外部，紧贴其下方，用普通块级元素（如 <div class="carousel-text">）承载 <li>轮播图高度需固定（如 <code>height: 400px），否则文字位置会随图片高度浮动

如何保持文字与当前图片同步切换？

脱离 caption 后，文字不再自动绑定当前 slide。必须监听 slide.bs.carousel 或 slid.bs.carousel 事件，手动更新文字内容。

const carousel = document.querySelector('#myCarousel');
const textContainer = document.querySelector('.carousel-text');

carousel.addEventListener('slid.bs.carousel', function (e) {
  const index = e.to; // 当前激活 slide 索引
  const texts = ['第一张描述', '第二张描述', '第三张描述'];
  textContainer.textContent = texts[index] || '';
});