用Bootstrap做团队介绍最稳组合是card+row/col，但需手动处理头像尺寸保底、text-truncate失效、悬停动画掉帧三处问题；企业页选用与否取决于能否接受同质化外观与类名冗余换取的交付速度。
直接说结论：用 Bootstrap 做团队介绍板块，card + row/col 是最稳的组合，但必须手动干预三处关键点——头像尺寸保底、文字截断失效、悬停动画掉帧。企业页是否该选 Bootstrap，取决于你能否接受它的「同质化外观」和「类名冗余」换来的交付速度。
为什么 text-truncate 在团队卡片里经常不生效
不是 class 写错了，而是 Bootstrap 的 flex 布局下，text-truncate 依赖的 overflow: hidden 条件被父容器“吃掉”了。尤其嵌套在 card-body 里时，col 默认不设宽度约束，导致截断逻辑崩溃。
实操建议：
- 给要截断的文字容器（比如
card-title或包裹它的div）同时加text-truncate和w-100 - 避免多套一层无意义的
div，比如<div><h5 class="card-title">张三</h5></div>，这会打断 flex flow，让w-100失效 - 小屏下如果标题和职位贴太近，给
h5加mb-1，别靠空格或br
rounded-circle 在小屏下头像过小怎么救
Bootstrap 的 rounded-circle 是纯 CSS 圆角裁剪，它不控制尺寸。当用在 col-sm-6 这类窄列里，头像宽度可能被压缩到 120px 以下，显得单薄又模糊。
实操建议：
- 头像容器加
mx-auto d-block居中，再强制最小宽度：min-width: 80px（或min-width: 5rem） - 用
img标签时，设width: 100%+height: auto，防止拉伸变形 - 别只信
rounded-circle，配合border或box-shadow提升视觉重量，比如border: 2px solid #f1f1f1
悬停上浮动画卡顿，transition: all 是罪魁祸首
很多模板随手写 .card:hover { transform: translateY(-5px); transition: all .3s; }，结果在低端安卓机或旧版 iOS Safari 上明显掉帧。问题不在 transform，而在 all 强制监听所有属性变化，包括触发布局重排的 padding、color 等。
实操建议：
- 只过渡合成属性：
transition: transform .3s ease, opacity .3s ease - 确保 hover 时只改
transform和opacity，别顺手加background-color或box-shadow变化 - 如果真要动阴影，用
filter: drop-shadow()替代，它走 GPU 合成
企业页用 Bootstrap 到底值不值
值，但得认清楚代价。它不是“更好”，而是“更快交付且少踩坑”。真正容易被忽略的是：一旦用了 Bootstrap，你就默认接受了它的语义弱化（满屏 col-md-4）、视觉同质化（客户一眼看出是 Bootstrap 套的）、以及后期定制成本陡增（想改一个按钮圆角，可能要覆盖整套 $border-radius 变量）。
如果你的团队介绍要嵌入 IoT 控制台、PWA 壳、或文档页，Mini.css 这类 7KB 无 JS 框架反而更干净；但如果是企业官网、CMS 后台、或需要快速上线的投标页面，Bootstrap 的 modal、tooltip、responsive table 能省掉至少两天调试时间。
