如何删除Bootstrap flex布局中项目底部的多余空白？

问题原因 #

Bootstrap 4+ 的row默认采用flex布局，默认align-items: stretch规则会让行内所有列的高度统一拉伸到和最高列一致，你给卡片设置的height: 100%会让卡片撑满整个列高度，尺寸更小的图片下方就会出现多余空白。

解决方案 #

只需修改3处CSS即可实现预期效果：

• 给#portfolid .row添加align-items: flex-start，覆盖默认的等高拉伸规则，让每个列的高度由自身内容决定
• 给#portfolid .portfolid-item添加position: relative，保证悬浮浮层的定位基准是当前卡片（原有代码缺少该属性会导致浮层定位错误）
• 删除#portfolid .portfolid-item中的height: 100%属性，取消强制拉伸卡片高度的规则

修改完成后的完整CSS代码如下：

#portfolid {
  padding: 60px 0;
}

/* 新增规则：取消列等高效果 */
#portfolid .row {
  align-items: flex-start;
}

#portfolid .portfolid-item {
  margin-bottom: 30px;
  /* 删除了原有height:100%，新增相对定位 */
  position: relative;
  align-items: center;
}

#portfolid .portfolid-item .portfolid-overlay {
  position: absolute;
  bottom: -25px;
  width: 90%;
  height: 85px;
  right: 20px;
  left: 20px;
  background-color: rgba(255, 255, 255, .9);
  padding: 15px;
  opacity: 0;
  visibility: hidden;
  transition: all .4s ease-in-out;
}

#portfolid .portfolid-item:hover .portfolid-overlay {
  bottom: 15px;
  opacity: 1;
  visibility: visible;
}

HTML代码无需做任何修改，替换原有CSS即可实现错落布局，消除多余底部空白。

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