如何在Bootstrap中制作一个响应式的团队介绍页面

用 Bootstrap 5 的 container-fluid + row + col 布局团队卡片

响应式团队页的核心不是“怎么好看”，而是“在手机上不溢出、在平板上不堆叠过密、在桌面端有呼吸感”。Bootstrap 5 的栅格系统默认支持，但很多人直接套 col-4 导致小屏错乱——因为没考虑断点适配。

正确做法是按设备分层定义列宽：

col-12：所有屏幕下占满一行（手机竖屏）col-sm-6：≥576px（小平板）起每行两个col-md-4：≥768px（中屏）起每行三个col-lg-3：≥992px（大屏）起每行四个（需确认内容密度是否撑得开）

别硬塞 col-3，它在手机上会强制四列挤成一排，文字缩成针尖大小。

团队头像用 img-fluid 而不是 img-responsive

img-responsive 是 Bootstrap 3 的类，Bootstrap 4/5 已废弃。用错会导致图片不缩放、溢出容器，尤其在 iOS Safari 上常见横向滚动条。

必须用 img-fluid，它会给图片加 max-width: 100% 和 height: auto。如果头像比例不统一，再补一个 object-fit: cover 防变形：

<img src="avatar.jpg" class="img-fluid rounded-circle" style="object-fit: cover; width: 180px; height: 180px;">

注意：rounded-circle 在小屏下会让头像过小（比如 col-sm-6 下宽度只剩 ~150px），建议搭配 mx-auto d-block 居中，并用 min-width 保底。

成员信息文字在小屏上被截断？检查 text-truncate 和父容器宽度

用 text-truncate 实现单行省略很常见，但它依赖父容器有明确宽度 + overflow: hidden。而 Bootstrap 的 col 在 flex 布局下有时不触发这个行为，尤其嵌套了 card-body 后。

解决方法很简单：

给包裹文字的元素加 text-truncate 同时加 w-100（强制设宽 100%）避免在 card-title 或 card-text 外再套多余 div，否则可能打断 flex flow如果用 h5 标题，记得加 mb-1 控制间距，否则小屏下标题和职位贴太近

错误示例：<h5 class="card-title text-truncate">张三</h5> —— 缺少 w-100，在 col-sm-6 下大概率失效。

悬停动画卡顿？禁用 transition 的非合成属性

给团队卡片加 hover 上浮效果（如 transform: translateY(-5px)）很常见，但有人顺手加 transition: all .3s，结果在低端安卓机上掉帧。

原因：all 会监听所有属性变化，包括 color、padding 这类触发布局重排（layout）的属性。真正该动的只有 transform 和 opacity（它们走 GPU 合成）：

.card:hover { transform: translateY(-5px); transition: transform .3s ease, opacity .3s ease; }

另外，iOS Safari 对 transform 的 z-index 行为敏感，如果卡片悬停后被其他元素遮挡，加一句 will-change: transform; 能提前提示渲染引擎优化。

最常被忽略的是字体加载时机：团队名用自定义字体（如 Google Fonts）时，首屏可能闪动或回退成系统字体。别只靠 font-display: swap，要在 <link> 加 rel="preload" 提前抓取。