Bootstrap卡片悬停动画及布局适配问题求助

我来帮你搞定这两个卡片布局的坑，都是Flex和CSS堆叠顺序里的常见问题：

问题1：悬停放大的卡片被下方卡片遮挡 #

这是因为DOM中后面的元素默认堆叠顺序更高，当你放大前面行的卡片时，它会被后面行的卡片压在下面。解决方法很简单，给hover状态的卡片提升堆叠层级：

修改你的CSS，给卡片加上相对定位（确保z-index生效），并在hover时设置更高的z-index：

.card-deck .card { 
  height:200px; 
  width: 200px; 
  transition: transform .1s; 
  position: relative; /* 让z-index生效的前提 */
}
.card-deck .card:hover { 
  -ms-transform: scale(1.25); /* IE 9 */ 
  -webkit-transform: scale(1.25); /* Safari 3-8 */ 
  transform: scale(1.25); 
  z-index: 10; /* 把hover的卡片放到最上层 */
}

这样放大的卡片就能覆盖所有其他卡片，不会被下方的遮挡了。

问题2：最后一行卡片被拉伸填满整行 #

Bootstrap的card-deck默认给卡片设置了flex: 1 0 0%，这意味着当行内有剩余空间时，卡片会自动拉伸。要让最后一行保持和其他行相同的卡片尺寸，需要禁止卡片的拉伸行为：

首先去掉卡片上固定的width: 200px（它会和媒体查询里的flex-basis冲突），然后给卡片添加flex-grow: 0，并修改媒体查询的样式：

.card-deck .card { 
  height:200px; 
  transition: transform .1s; 
  position: relative; 
  flex-grow: 0; /* 禁止卡片自动拉伸 */
  flex-shrink: 1; /* 允许小屏幕下适当收缩 */
}

@media (min-width: 576px) { 
  .card-deck .card { 
    flex-basis: calc(50% - 30px); 
  } 
}
@media (min-width: 768px) { 
  .card-deck .card { 
    flex-basis: calc(33.33% - 30px); 
  } 
}
@media (min-width: 992px) { 
  .card-deck .card { 
    flex-basis: calc(25% - 30px); 
  } 
}

如果你觉得Flex布局处理起来麻烦，也可以改用Grid布局，它对这种响应式卡片布局更友好，自动处理最后一行的对齐：

.card-deck {
  display: grid;
  gap: 30px; /* 替代原来的gutter间距 */
}

/* 小屏幕：每行2张 */
@media (min-width: 576px) {
  .card-deck {
    grid-template-columns: repeat(auto-fill, minmax(calc(50% - 15px), 1fr));
  }
}

/* 中等屏幕：每行3张 */
@media (min-width: 768px) {
  .card-deck {
    grid-template-columns: repeat(auto-fill, minmax(calc(33.33% - 20px), 1fr));
  }
}

/* 大屏幕：每行4张 */
@media (min-width: 992px) {
  .card-deck {
    grid-template-columns: repeat(auto-fill, minmax(calc(25% - 22.5px), 1fr));
  }
}

用Grid的话，你可以删掉原来Flex相关的媒体查询，它会自动根据屏幕宽度排列卡片，最后一行的卡片也不会被拉伸。

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