轮播图文字说明必须放在.carousel-caption容器内且置于之后，它已预设定位、响应式样式和可访问性支持；顺序错误、缺少class或忽略aria-label更新将导致显示异常或无障碍失效。
轮播图文字说明加在 .carousel-caption 里
Bootstrap 轮播图（carousel）自带文字层容器，不是随便放 <div> 就能对齐或响应式显示。必须用官方预留的 <code>.carousel-caption 类，它已预设了定位、内边距、背景半透明和文字颜色适配逻辑。
常见错误是把文字直接写在 .carousel-item 内部但没加该 class，结果文字位置飘移、小屏不居中、深色图上字看不清。
- 每个
<div class="carousel-item"> 内，文字部分必须包裹在 <code><div class="carousel-caption"> 中 <li> <code>.carousel-caption默认定位为absolute，父容器需是relative（.carousel-item已满足） - 文字默认白色+阴影，若背景太亮（如纯白图），需手动加
text-dark或自定义 CSS 调整颜色
文字内容要放在图片标签之后，否则会遮挡
HTML 结构顺序影响层叠顺序。如果把 .carousel-caption 写在 <img alt="怎么给Bootstrap轮播图加文字说明" > 标签前面，且没调 z-index，文字可能被图片盖住——尤其 Bootstrap 5+ 默认给 <img alt="怎么给Bootstrap轮播图加文字说明" > 加了 display: block 和隐式层叠上下文。
正确顺序只有一种：
<div class="carousel-item">
<img src="..." alt="...">
<div class="carousel-caption">
<h5>标题</h5>
<p>说明文字</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill4914" title="VPS Bootstrap"><img
src="https://img.php.cn/upload/skill/000/000/081/179025304626966.jpg" alt="VPS Bootstrap" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill4914" title="VPS Bootstrap">VPS Bootstrap</a>
<p>从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。</p>
</div>
<a href="/xiazai/skill4914" title="VPS Bootstrap" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
</div>
</div>
- 永远把
.carousel-caption放在<img alt="怎么给Bootstrap轮播图加文字说明" >或<video></video>之后 - 不要用
z-index强行提层——.carousel-caption默认z-index: 10，足够覆盖媒体内容 - 若用了背景图（
background-image），确保父.carousel-item没设overflow: hidden把文字裁掉
移动端文字太小或溢出？优先调 font-size 和 px 内边距
Bootstrap 的 .carousel-caption 在小屏下默认用 rem 设 padding 和字体，容易导致文字挤成一团或超出容器。响应式文字不是靠媒体查询“重写全部”，而是微调关键尺寸。
- 在自定义 CSS 中覆盖：
.carousel-caption { padding: 1rem 0.75rem; }（避免小屏左右留白过大） - 用
font-size: clamp(0.875rem, 4vw, 1rem);让文字随视口平滑缩放 - 禁用
white-space: nowrap（某些主题会误加），允许长文字自动换行 - 别碰
max-width——.carousel-caption默认是width: 90%，改太小会导致居中偏移
动态更新文字时，别漏掉 aria-label 同步
轮播图常配合 JS 切换内容，如果只改 .carousel-caption 里的文本却不更新 aria-label，屏幕阅读器会读旧描述，违反可访问性要求。
- 每次调用
carousel('next')或手动切换后，同步设置：$activeItem.find('.carousel-caption').attr('aria-label', '当前：' + captionText) - 更稳妥的做法：把文字信息存在
data-属性里，渲染时统一读取并注入aria-label和 DOM - 如果用了
interval: false手动控制，务必在点击事件里补全aria-live区域更新，否则视障用户无法感知变化
文字说明不是装饰，是轮播图语义结构的一部分。位置、顺序、尺寸、可访问性，四者缺一不可——尤其 aria-label 更新，上线前很容易被跳过。
