Bootstrap 5动态生成轮播项时carousel-caption文本重叠问题求助

核心问题：HTML结构错误 #

你动态生成的代码里，把carousel-caption放到了carousel-item的外部，还多写了一个多余的</div>，导致所有轮播标题都直接挂载在carousel-inner下，而非每个轮播项的内部。Bootstrap 5的轮播只会隐藏非活跃的carousel-item，但不在其内部的carousel-caption不会被同步隐藏，所以所有标题重叠显示。

修正后的JavaScript代码 #

const divBtag = index === 0 ? '<div class="carousel-item active">' : '<div class="carousel-item">';
var photoHtml = 
    divBtag +
        '<img src="' + photo.photo_path + '" class="d-block" style="width:100%" />' +
        '<div class="carousel-caption">' +
            '<h5>' + photo.photo_description + '</h5>' +
            '<p>' + photo.photo_datetime + '</p>' +
        '</div>' +
    '</div>';

$('.carousel-inner').append(photoHtml);

关键修正点 #

• 把carousel-caption的代码移到carousel-item的闭合标签</div>之前，确保每个标题都属于对应轮播项
• 删除了原代码中多余的</div>（原代码在img后提前闭合了carousel-item，又在最后多写了一个闭合标签，导致结构混乱）

额外注意事项 #

如果动态生成完轮播项后，轮播功能未正常工作，需要确保已正确初始化Bootstrap轮播：

$(document).ready(function() {
    $('.carousel').carousel();
});

内容的提问来源于stack exchange，提问作者CK8