应将文字从.carousel-item内部移出，置于.carousel-inner外部作为独立区块，并通过slid.bs.carousel事件监听动态更新内容，确保图文同步。
Carousel 文字默认在图片上方，怎么移到下方？
Bootstrap 的 carousel-caption 默认绝对定位在图片中央偏上区域，不是“下方”。所谓“图片下方”，实际是指轮播图容器底部、图片区域之外的独立文字区——这需要脱离默认 caption 的定位逻辑，手动重构布局。
关键不是调 top / bottom，而是把文字从 .carousel-item 内部的覆盖层，挪到图片容器外、作为独立区块渲染。
- 不要用
carousel-caption做“下方文字”，它天生是叠加层，强行 bottom: 0 容易被裁剪或响应式错位 - 把文字放在
.carousel-inner外部，紧贴其下方，用普通块级元素（如<div class="carousel-text">）承载 - 轮播图高度需固定（如
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] || '';
});
- 用
slid.bs.carousel（不是slide），确保 DOM 已完成切换后再更新文字 - 索引
e.to比e.from更可靠，后者在初始化时可能为 undefined - 如果文字含 HTML（如链接、强调），别用
textContent，改用innerHTML，但需自行过滤 XSS
响应式下文字被截断或错位怎么办？
文字区块脱离图片后，容易在小屏上撑宽容器或换行异常。必须限制宽度、控制换行，并与轮播图对齐。
- 给
.carousel-text加max-width: 100%和padding: 0 1rem，避免超出图片宽度 - 用
white-space: normal（默认就是）+word-break: break-word防止长英文单词溢出 - 若轮播图用了
object-fit: cover，图片可能裁剪，文字区域应设margin-top: -1px消除 border 或间隙导致的错位 - 不要给文字加
position: absolute，否则在 flex 容器或 grid 布局里极易失锚
有没有更轻量的替代方案？不用 JS 监听？
纯 CSS 方案仅适用于静态文字（所有 slide 共享同一段说明），或使用 data 属性 + CSS 计数器（不推荐，维护性差）。真实项目中，只要轮播图有 3 张以上、文字不同，JS 绑定就是最直接可靠的解法。
Bootstrap 5.3+ 支持 data-bs-interval 等属性，但没提供 caption 位置配置项——这意味着没有“开关式”设置，必须动手调整结构和逻辑。
最容易被忽略的是：轮播图容器的 overflow: hidden 通常只作用于内部图片，但如果你把文字放在 .carousel 最外层，要确认父容器没设 overflow: hidden 把文字裁掉。
