小屏下text-center对.carousel-caption无效，因默认position: absolute定位及left/right偏移破坏居中；应重置@media (max-width: 576px) { .carousel-caption { left: 0; right: 0; text-align: center; } }并确保子元素响应式对齐。
小屏下Carousel文字对齐失效，text-center 不起作用？
Bootstrap 的 carousel-caption 默认用 position: absolute 定位，小屏（sm 及以下）时父容器高度塌陷或 transform 干扰，导致 text-center 看似无效。真正起作用的是 caption 内部文本的对齐，而非整个 caption 块的位置。
实操建议：
- 别只加
text-center到carousel-caption，要确保其子元素（如<h5>、<p>）也带响应式对齐类，例如text-sm-start text-md-center - 检查是否被自定义 CSS 覆盖了
left/right值 —— Bootstrap 5 默认设left: 15%和right: 15%，小屏下这个固定偏移会破坏居中 - 更稳妥的做法是重置小屏下的定位：
@media (max-width: 576px) { .carousel-caption { left: 0; right: 0; text-align: center; } }
小屏字体太小，fs-4 在 xs 下还是看不清？
Bootstrap 的 fs-* 类（如 fs-4）是固定值（fs-4 = 1.25rem），不随屏幕缩放自动调整。在 xs（<576px）设备上，1.25rem ≈ 20px，但受限于窄屏宽度和用户缩放习惯，实际可读性常不足。
实操建议：
- 用响应式字体类组合，例如
fs-6 fs-sm-5 fs-md-4 fs-lg-3，让字体从xs的1rem逐步放大到lg的1.5rem - 避免直接改
.carousel-caption h5的font-size，优先用内置类；若必须定制，加!important前要确认层级，因为 Carousel 的默认样式带!important - 注意行高配合：小屏下
lh-1比lh-base更安全，防止文字被截断
为什么加了 col-12 还是换行错乱？
在 carousel-caption 里嵌套 row/col 是常见做法，但 carousel-caption 默认是 position: absolute，脱离文档流，导致 col 的 flex 行为异常，尤其在小屏下 col-12 可能因父容器宽度计算错误而撑不开或收缩过度。
实操建议：
- 不要在
carousel-caption内用row—— 改用d-flex flex-column+text-center控制布局 - 如果真要用栅格，先给
carousel-caption加position: relative（覆盖默认 absolute），再包裹container或div class="row" -
col-12在xs下本该占满，但如果父元素 padding 或 margin 未重置，视觉上会显得“没铺满”，此时检查.carousel-caption的padding是否被继承
修改后在 iOS Safari 上字体突然变细或模糊？
这是 WebKit 渲染 bug：当 carousel 启用 transform: translateZ(0)（Bootstrap 默认启用硬件加速）时，小屏下部分字体渲染会失真，尤其搭配 font-weight: 600 或自定义字体时。
实操建议：
- 临时禁用硬件加速：给
.carousel加style="transform: none !important;"，或覆盖.carousel-inner { transform: none; } - 强制重绘字体：加
-webkit-font-smoothing: antialiased;到.carousel-caption * - 避免在小屏 caption 中使用
font-weight: bolder或非系统字体，优先用fw-bold配合系统字体栈
