响应式团队卡片需完整断点链（col-12 col-sm-6 col-md-4 col-lg-3）、img-fluid+object-fit防头像变形、text-truncate配w-100和overflow:hidden、card加h-100与flex-column撑高，缺一即失效。
Bootstrap 做响应式团队介绍卡片，核心不是“用不用卡片”，而是“col类怎么配、card怎么设高、头像和文字怎么防溢出”。用错断点或漏掉h-100，手机上就会出现文字缩成针尖、头像切掉一半、卡片高度参差如楼梯——这些都不是 Bootstrap 的问题，是栅格使用没闭环。
为什么加了 col-md-4 手机上还是四列挤在一起？
因为没写移动优先的完整断点链。只写col-md-4，等于告诉 Bootstrap：“768px 以上才按 4 列排，小屏下你随便”。结果小屏继承默认块级行为，col退化为普通 div，宽度撑满但不换行，四张卡片强行横排溢出屏幕。
- 必须从最小屏开始写：
col-12 col-sm-6 col-md-4 col-lg-3 -
col-12是兜底：所有设备下至少占满一行（手机竖屏） - 别信“写一个断点自动回退”——Bootstrap 不会猜你想要什么，只按写的类生效
- 检查是否漏了
<div class="row">包裹——没它，col的 flex 行为根本不会触发
团队头像变形、溢出、iOS 横向滚动条怎么解？
根本原因是图片没走响应式路径。img-responsive 是 Bootstrap 3 的遗物，BS5 里用了它，图片既不缩放也不约束宽高，尤其在 Safari 上极易触发横向滚动。
- 头像必须加
img-fluid（提供max-width: 100%+height: auto） - 如果头像源图比例不一，补
style="object-fit: cover;"防拉伸变形 - 别用
rounded-circle单独套在窄列里（比如col-sm-6下宽度只剩 ~150px），头像会小得看不见；加mx-auto d-block居中，并用min-width: 80px保底 - 检查父容器有没有
overflow: hidden——没有的话，object-fit: cover可能失效
文字截断失效、职位贴标题太近、悬停卡顿怎么调？
text-truncate 不是万能胶，它依赖两个硬条件：父容器有明确宽度 + overflow: hidden。而 Bootstrap 的col在 flex 布局下有时不主动触发这个上下文。
-
text-truncate必须搭配w-100，否则在col-sm-6等场景大概率白写 - 标题用
<h5 class="card-title mb-1">，避免小屏下和职位文本贴死 - 悬停动画别写
transition: all .3s——它会监听color、padding等触发布局重排的属性，低端安卓直接掉帧；只动合成层：transition: transform .3s, opacity .3s - 卡片内文字行数不一导致高度错位？给
card加h-100，再给card-body加d-flex flex-column，描述段落加flex-grow-1撑满剩余空间
真正难的不是写出能跑的代码，而是理解每个类背后的约束条件：viewport 元标签缺不得、row不能省、img-fluid不能替、h-100不是可选而是必要。这些点漏掉任意一个，响应式就从“自动适配”变成“手动救火”。
