应使用 mx-auto + block 实现头像居中，配合 col 断点控制；字段标签左对齐、值绝对定位居中；头像与资料区用 d-flex flex-column flex-md-row 控制堆叠；圆角用 rounded-circle，阴影按屏幕切换，尺寸统一靠 h-100/w-100+aspect-ratio 或 padding-top 兼容旧 Safari。
头像居中但不破坏响应式流式结构
直接给 <img> 加 text-center 或 center-block 在 bootstrap 5+ 中已失效——这些类被移除或语义弱化，且会把整个父容器内容强行居中，导致字段标签也偏移。真正可控的方式是用 mx-auto + 块级显示，同时保留 col 的响应式断点控制。
-
<img>必须设为block（默认是 inline），否则margin: auto不生效 - 宽度建议用
width: 120px或w-25等固定比例类，避免在小屏撑满整行 - 外层用
<div class="col-12 col-md-6 col-lg-4 mx-auto"> 控制最大宽度和居中范围，比单纯靠 <code>text-center更可靠 - 别用
float包裹头像——它会脱离文档流，后续的资料字段容易错位 - 推荐结构：
<p class="position-relative mb-3"><strong class="float-start">Email</strong><span class="value position-absolute top-50 start-50 translate-middle">xxx@example.com</span></p> -
float-start锚定标签到左侧，position-absolute+translate-middle让值真正在容器中心，不依赖宽度 - 小屏下若字段过多，可加
@media (max-width: 576px)把position-relative改为text-center，让整行文字居中（此时字段少，可接受） - 避免用
justify-content: space-between——当值很长时，右侧会被截断或溢出 - 用
<div class="d-flex flex-column flex-md-row">：移动端竖排，≥md 屏横排 <li>头像区加 <code>flex-shrink-0防止被压缩，资料区加flex-grow-1占满剩余空间 - 横排时，资料区内部仍需用
ps-4 ps-md-0控制左右 padding，避免小屏有额外缩进 - 别用
col直接套头像——它会引入不必要的 gutter 和响应式列计算，反而增加调试成本 - 圆角固定用
rounded-circle，不要混用rounded-3或自定义border-radius - 阴影用
shadow-sm（小屏） +shadow（桌面），通过d-none d-md-block切换，而非媒体查询硬写 - 尺寸统一靠
h-100+w-100配合父容器aspect-ratio: 1，比单纯设width更稳 - 加载失败 fallback 文字要用
bg-light text-muted p-3占位，防止布局塌陷
字段标签左对齐、值居中，且适配手机竖排
用户资料页常见需求是「Email：xxx@example.com」这种形式，要求标签始终靠左、值在整行内水平居中。用 text-center 会让标签也居中，而纯 flex 布局在小屏下容易换行错乱。
头像与资料区域在不同断点下的堆叠逻辑
Bootstrap 的 flex-column 默认在 xs 断点生效，但头像和资料区需要更精细的控制：大屏横排（头像左、资料右），小屏竖排（头像上、资料下）。
头像圆角、阴影、响应式尺寸一致性
头像视觉统一性常被忽略：不同设备下圆角变直、阴影消失、尺寸跳变，本质是 class 覆盖或单位混用。
aspect-ratio 在旧版 Safari（iOS 15.4 之前）不支持，必须补 padding-top: 100% + position: relative + 绝对定位内容。这不是 Bootstrap 问题，但没处理就会在部分真机上变形。
