如何让团队展示卡片内的图标距离边框盒底部的间距保持统一

你这个问题是因为每个卡片列的内容高度不统一，联系图标容器跟随上方内容高度自然排布导致的错位，按下面步骤修改即可：

1 调整列容器样式 #

给每个承载单张卡片的col-sm-4添加纵向flex布局，让所有列自动撑满整行的统一高度：

.col-sm-4 {
  display: flex;
  flex-direction: column;
}

如果你不想修改全局的col-sm-4样式，可以给这些团队卡片的列单独加一个自定义类（比如team-card-col），给这个自定义类加上述样式即可。

2 调整内容容器的填充属性 #

给包裹头像、姓名、职位、个人介绍的.float-box容器添加flex-grow: 1属性，让它自动填充列内的剩余空间，把联系图标容器挤到列的最底部：

.float-box.about-team {
  flex-grow: 1;
}

如果怕影响其他页面的float-box样式，也可以单独加自定义类限定作用范围。

3 （可选）统一图标容器间距 #

如果需要固定图标和上方卡片、列底部的间距，可调整.testusus的边距，原来的position: relative; bottom: 0可以直接删除：

.testusus {
  text-align: center;
  margin-top: 16px; /* 可根据设计需求调整数值 */
  margin-bottom: 20px; /* 可根据设计需求调整数值 */
}

修改完成后所有卡片的联系图标都会统一对齐在同一水平线，不会因为个人介绍文本长度不同出现错位。

内容的提问来源于stack exchange，提问作者OnlyProblems