小屏下文字不显示是因为bootstrap 5默认仅在≥768px断点显示.carousel-caption，sm及以下为display: none；需用@media (max-width: 575.98px)启用并重置position、top/bottom锚点及父容器min-height确保正确渲染与对齐。
小屏下文字不显示？先检查 .carousel-caption 是否被隐藏
Bootstrap 5 默认只在 min-width: 768px（即 md 断点）及以上显示 .carousel-caption，sm 及以下直接是 display: none。你调了半天对齐没效果，很可能文字压根没渲染出来。
- 打开 Chrome DevTools，选中
.carousel-caption元素，看Computed面板里display是不是none - 别用
d-md-block——它对sm及以下无效 - 要全断点显示，加这条 CSS：
.carousel-caption { display: block !important; }仅限调试；生产环境推荐用媒体查询精准控制：@media (max-width: 575.98px) { .carousel-caption { display: block; } }
对齐方式总“错位”？别只靠 text-center
text-center 等价于 text-xs-center，会作用于所有断点，且无法被更小断点类覆盖。写了它，text-md-start 就失效了——这不是 bug，是 CSS 层叠规则。
- 正确做法是「移动优先」：按断点从小到大写，让后写的覆盖前面的
text-start text-md-center text-xl-end - 顺序不能反——
text-xl-end text-md-center在xl下依然居中 - 如果文字容器用了
d-flex或justify-content-*，text-*类会失效，此时该调父容器的justify-content和align-items
为什么加了 text-align: center 还是偏左？定位没重置
.carousel-caption 默认是 position: absolute，且带 top: 20%、left: 15%、right: 15%。只改 text-align 只能居中文本内容，整个容器还在左上角。
- 真正居中要重置定位：
.carousel-caption { top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; } - 但小屏图片高度波动大时，
top: 50%容易让文字飘出可视区；更稳的方案是钉底部：.carousel-caption { position: absolute; bottom: 1rem; left: 0; width: 100%; text-align: center; } - 确保父级
.carousel-item有position: relative（Bootstrap 5 默认已设）和明确高度（如min-height: 40vh），否则绝对定位会相对于 viewport
不同断点需要不同对齐？别拼错类名
Bootstrap 5+ 已弃用 text-left/text-right，统一用逻辑值 start/end。写错就等于没写。
-
text-md-right→ 浏览器直接忽略，回退到上一个有效类 - 正确写法：
text-md-end（中屏右对齐）、text-lg-justify（大屏两端对齐） - 两端对齐只对多行段落有效，单行标题或短文本基本没效果
- 如果项目用了自定义断点（比如改了
$grid-breakpoints），lg对应的实际像素值可能不是默认的992px，得确认清楚
text-align，而是要同步处理 display、position、top/bottom 锚点、父容器高度这四层。漏掉任何一层，都可能让文字消失或错位。
