加了text-center仍全屏居中，是因为text-center等价于text-xs-center，会作用于所有断点且无法被更小断点类覆盖；正确做法是移动优先：text-start → text-md-center → text-xl-end，按断点从小到大顺序书写以确保CSS层叠生效。
小屏下文字左对齐但大屏居中，为什么加了 text-center 还是全屏居中？
因为 text-center 等价于 text-xs-center，它会作用于所有断点（包括 xs），且无法被更小断点的类覆盖。一旦写了它，text-md-start 或 text-lg-center 都不会生效——除非你显式用更大断点类去覆盖。
正确做法是「移动优先」：先设基础行为（如小屏左对齐），再用更大断点类逐级覆盖：
-
text-start→ xs 尺寸默认左对齐（不写则走浏览器text-align: start） -
text-md-center→ ≥768px 时居中，覆盖前面的text-start -
text-xl-end→ ≥1400px 时右对齐，再覆盖前两者
顺序必须从小到大写，CSS 层叠才可靠；写反了（比如 text-xl-end text-md-center）会导致 xl 下也居中。
轮播图里 .carousel-caption 在 Bootstrap 5 中失效了怎么办？
Bootstrap 5 已移除 .carousel-caption 的默认样式支持——它不再自带定位、内边距或颜色，直接套用 v4 写法会导致文字堆在左上角、无遮罩、无过渡协调。
推荐改用语义化自定义结构，把文字容器和 <img> 放在同级：
<div class="carousel-item active">
<img src="..." class="d-block w-100">
<div class="carousel-text-overlay">
<h2>标题</h2>
<p>说明文字</p>
</div>
</div>
然后用 CSS 控制定位：
- 确保父容器
.carousel-item是position: relative（Bootstrap 5 默认已设） -
.carousel-text-overlay设position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)实现真正居中 - 避免设固定
width，否则小屏易溢出；用max-width: 90%+text-wrap: balance（现代浏览器）更稳妥
轮播图文字在移动端被截断，top: 50% 不稳定怎么调？
当图片高度随屏幕缩放剧烈变化（比如移动端图片变矮），top: 50% 容易让文字超出可视区顶部或底部。
更稳健的做法是换锚点：
- 改用
bottom: 1.5rem+left: 50%+transform: translateX(-50%)，把文字钉在图片底部上方固定距离处 - 或者用 Flex 布局替代绝对定位：
.carousel-item { display: flex; flex-direction: column; justify-content: center; align-items: center; }，但需注意图片要设height或min-height，否则 Flex 无参考高度 - 若用 Flex，务必给
.carousel-item img加object-fit: cover和明确尺寸（如height: 50vh），不然图片可能拉伸或留白
图标和文字在轮播文案里总不对齐，align-items-center 没反应？
Bootstrap Icons v1.10+ 的 SVG 自带 vertical-align: -0.125em，会强行覆盖你写的 Flex 对齐逻辑。
必须先清除这层干扰：
- 重置 SVG 对齐：
i.bi svg { vertical-align: inherit; } - 再统一控制外层
<i>标签：i.bi { vertical-align: text-bottom; }或干脆删掉，让 Flex 主导 - 如果用了
display: inline-flex，记得给子元素设align-self: center，别只依赖容器的align-items
容易被忽略的是：SVG 的 viewBox 和实际渲染尺寸不一致时，vertical-align 的基准线也会偏移——这时得配合 line-height 或 margin-top 微调。
