全屏背景图需手写css：background-position: center center、background-size: cover、min-height: 100vh三者缺一不可；头像居中应设img为display: block并mx-auto；响应式横竖布局用d-flex flex-column flex-md-row配合flex-shrink-0和flex-grow-1。
背景图怎么加才真正全屏且居中
Bootstrap 官方 CSS 里没有 bg-image 或 backgroundimage 这类类名，硬套会完全无效。必须手写 CSS，核心三要素缺一不可：background-position: center center、background-size: cover、min-height: 100vh。
常见错误是只写 background-position: center —— 这只设了水平居中，垂直方向默认是 top，图片被压在顶部；或者用 height: 100%，结果因父元素没高度而失效。
- 别把背景图加在
.container或.row上：它们自带max-width和padding，会截断高度 - 推荐挂到
<section class="d-flex justify-content-center align-items-center"></section>外层，并设min-height: 100vh - iOS Safari 对
background-attachment: fixed支持差，滚动卡顿，直接弃用
头像怎么居中又不破坏响应式流
text-center 在 Bootstrap 5+ 中已不能可靠居中头像——它会让整个父容器内容（包括字段标签）一起偏移，且对垂直方向无效。真正可控的是让 <img> 自身成为块级元素并用 mx-auto。
关键前提是：<img> 必须是 display: block，否则 margin: auto 不生效；宽度建议用 w-25 或固定值如 width: 120px，避免小屏撑满整行。
- 外层用
<div class="col-12 col-md-6 col-lg-4 mx-auto"> 控制最大宽度和居中范围，比单纯靠 <code>text-center更稳定 - 别用
float包裹头像：脱离文档流后，后续资料区容易错位或塌陷 - 圆角统一用
rounded-circle，阴影按断点切换（比如shadow-sm d-none d-md-block） - 字段标签左对齐、值真正在行内居中，推荐结构：
<p class="position-relative mb-3"><strong class="float-start">Email</strong>xxx@example.com</p>，再用position-absolute+translate-middle居中值 - 小屏字段太多时，可加
@media (max-width: 576px)把position-relative改为text-center，整行居中更简洁 - 避免用
justify-content: space-between：值内容过长时右侧会被截断或溢出 -
center-block是 Bootstrap 3 的过时类，4/5 中已移除，继续使用等于没写 - 在
d-flex容器里给图片加d-block是冗余的，flex 项天然支持对齐，无需额外转块级 - 移动端 Safari 对
aspect-ratio支持不稳定，旧版本建议用padding-top模拟比例
头像与资料区怎么横竖自动切换
想在大屏横排（头像左、资料右）、小屏竖排（头像上、资料下），不能靠 .col 堆砌，得用 Flex 控制流向：d-flex flex-column flex-md-row 是最直接解法。
注意两个细节：头像区要加 flex-shrink-0 防止被压缩变形；资料区加 flex-grow-1 占满剩余空间。横排时资料区内边距要用 ps-4 ps-md-0 动态控制，避免小屏多出缩进。
为什么 img-fluid + mx-auto 有时不居中
img-fluid 只负责响应式缩放（max-width: 100% + display: block），它本身不提供任何居中能力。如果父容器不是块级或没设明确高度，mx-auto 就只能水平居中，垂直方向依然悬空。
当父容器高度由内容撑开（比如卡片内嵌图），d-flex 居中会失效，此时更适合用绝对定位 + object-fit: cover 方案：父容器设 position: relative，图片加 position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)，并显式设 width: 100%; height: 100%。
