小屏下文字不显示是因为Bootstrap 5的.carousel-caption默认仅在≥768px显示，小屏下display: none；需用媒体查询或!important覆盖，并手动添加遮罩、定位和响应式样式确保可读性。
小屏下文字不显示？默认就是隐藏的
bootstrap 5 的 .carousel-caption 默认只在 ≥768px（md 断点）才显示，小屏下直接是 display: none。这不是 bug，是设计行为——你没看到文字，大概率不是 css 写错了，而是它根本没被渲染出来。
- 检查浏览器开发者工具里
.carousel-caption元素的 computed styles，确认display值是否为none - 别依赖
d-md-block类：它等价于display: block仅在min-width: 768px生效，sm（576px）及以下完全失效 - 如果项目要求文字必须在所有断点可见，最简方案就是加一行覆盖：
.carousel-caption { display: block !important; }
想按需控制显示断点？用媒体查询更稳妥
硬写 !important 容易在未来样式迭代中冲突，尤其当团队共用 CSS 构建流程时。推荐用标准响应式写法，明确声明每个断点的行为。
- 先重置默认隐藏：
.carousel-caption { display: none; } - 再逐级放开：
@media (min-width: 576px) {<br> .carousel-caption { display: block; }<br>}（对应sm及以上） - 若需适配折叠屏或平板竖屏，可补充：
@media (min-width: 425px) { ... }，但注意避免和xs断点重叠 - 不要混用
d-sm-block和自定义 media query——类名优先级低，容易被覆盖
文字在小屏上错位或被裁切？根源常不在显示逻辑
即使 display 正确，文字仍可能偏移、截断或看不见，这通常是因为定位锚点失效或容器高度塌陷。
-
.carousel-item在小屏下若图片高度变矮（比如object-fit: cover裁剪后只剩中间一窄条），top: 20%这种百分比定位就会让文字“飘”到图外——改用bottom: 1.5rem或inset: auto 1rem 1rem 1rem更可靠 - 确保父容器
.carousel-item有明确高度（例如设min-height: 40vh），否则绝对定位的.carousel-caption会相对于 viewport 定位，而非图片区域 - 移动端字体缩放或系统字号设置可能撑开
p标签，导致溢出；给.carousel-caption p加line-height: 1.4和margin: 0预防
Bootstrap 5 中 .carousel-caption 样式已被弱化，别指望它开箱即用
从 Bootstrap 5 开始，.carousel-caption 的默认样式大幅简化：没了背景遮罩、没了内边距、color 改为 var(--bs-body-color)。这意味着你在小屏下即使让它显示了，也可能文字发灰、无对比、边缘紧贴图片。
- 必须手动加遮罩：
.carousel-caption {<br> background-color: rgba(0, 0, 0, 0.6);<br> padding: 1rem;<br>} - 颜色要显眼：
color: #fff比依赖--bs-body-color更可控，尤其深色图上 - 别用
width: 70%这类固定比例——小屏宽度窄，70% 会撑出屏幕，改用max-width: 90vw+margin: 0 auto
