轮播图文字描述必须放在.carousel-item内部、图片之后，用.carousel-caption包裹且为直接子元素；默认仅在≥768px显示，需加响应式css控制；不可额外设置transition，点击区域应限于链接文本而非整个.caption容器。
轮播图文字描述加在哪几个位置
bootstrap 轮播图的文字描述，必须放在 .carousel-item 内部、图片之后（或代替图片），且需用 .carousel-caption 包裹。它不是加在 data-bs-* 属性里，也不是靠 js 动态注入——结构写错，css 就不生效，文字要么不显示，要么错位。
常见错误现象：.carousel-caption 放在 .carousel-inner 外面；或者嵌套在 <img> 标签里；又或者漏了 position: absolute 所需的父容器定位（.carousel-item 默认是 position: relative，这点 Bootstrap 已设好，不用改）。
-
.carousel-caption必须是.carousel-item的直接子元素 - 文字内容建议用
<h3></h3>+<p></p>组合，语义清晰，也方便默认样式适配 - 如果用了自定义 CSS 覆盖了
opacity或transform，文字可能“看不见”但实际存在——用浏览器检查元素确认是否被隐藏
文字描述在移动端显示不全或被裁切
这是最常被忽略的兼容性问题：Bootstrap 5 的 .carousel-caption 默认只在 ≥768px（md 断点）才显示，小屏下 display: none。如果你没改过源码或自定义 CSS，文字在手机上根本不会出现。
解决方法很简单，加一行覆盖样式即可：
.carousel-caption {
display: block !important;
}
更稳妥的做法是按需响应式控制，比如只在 sm 及以上显示：
.carousel-caption {
display: none;
}
@media (min-width: 576px) {
.carousel-caption {
display: block;
}
}
- 不要依赖 Bootstrap 默认的
d-md-block类——它在sm（576px）以下强制隐藏 - 如果用了
!important，检查是否和其他 CSS 冲突（比如某个框架重置了display） - 文字太多时，
.carousel-caption默认没有换行保护，长单词会溢出容器，可加word-break: break-word
如何让文字描述和图片同步淡入淡出
Bootstrap 轮播图的过渡动画作用于整个 .carousel-item，而 .carousel-caption 是它的子元素，所以默认就参与动画。但如果你手动加了 transition 到文字上，反而会导致两次过渡叠加，出现“闪一下再动”或延迟响应。
关键点在于：别碰 .carousel-caption 的 transition 或 opacity 动画——全部交给 .carousel-item 的 opacity 和 transform 控制。
- 确保没给
.carousel-caption单独设transition: opacity .6s这类规则 - 如果用了
data-bs-interval="2000"，文字会在每次切换时随 item 一起淡出/淡入，无需额外 JS - 若想文字有独立入场节奏（比如从下往上滑入），得自己写 CSS 动画，并监听
slid.bs.carousel事件触发，但这已脱离默认行为，容易和轮播逻辑冲突
文字描述点击区域太小，用户误操作跳转
很多人把整个 .carousel-caption 套上 @#@#@#@#@#@#@#@#@#@0
<div class="carousel-caption">
<h3>@#@#@#@#@#@#@#@#@#@1</h3>
<p>说明</p>
</div>
pointer-events: none 关掉 .carousel-caption 的事件，再给内部 <a></a> 单独设 pointer-events: auto
复杂点在于：轮播图本身依赖 click/touch 事件控制切换，任何大面积遮盖都会干扰它。能不动结构就不动，优先用语义化链接替代“伪按钮”式包裹。
