Bootstrap4使用carousel-inner类时卡片外图片只显示一半如何解决？

问题原因 #

Bootstrap 4 原生的 .carousel-inner 类默认设置了 overflow: hidden 属性，用于隐藏轮播滑动时超出容器的内容。你设置的向上偏移的头像属于超出 .carousel-inner 顶部的内容，因此会被默认裁剪，仅显示下半部分。
同时你现有的代码中 .customer-card 未设置 position: relative，会导致头像的绝对定位基准错误，也可能引发显示异常。

解决方案 #

按以下步骤修改即可实现预期效果：

• 给当前使用的轮播外层添加自定义类（避免全局修改Bootstrap样式影响其他轮播组件），比如添加 class="customer-review-carousel"
• 覆盖该自定义类下的轮播相关样式，调整溢出规则，同时给轮播项加足够的顶部内边距容纳向上偏移的头像
• 补充 .customer-card 的相对定位属性，保证头像定位基准正确

修改后的CSS代码如下：

/* 控制轮播横向溢出，不影响纵向超出内容显示 */
.customer-review-carousel {
  overflow-x: hidden;
}
/* 放开当前轮播内部的纵向溢出裁剪 */
.customer-review-carousel .carousel-inner {
  overflow: visible;
}
/* 给轮播项加顶部内边距，预留头像显示空间 */
.customer-review-carousel .carousel-item {
  padding-top: 65px;
}
/* 补充卡片相对定位，原有其他样式保持不变 */
.customer-card{ 
  position: relative;
  width: 100%;
  max-width: 290px;
  padding: 39px 0px 35px 0px;  
  border-radius: 5px;
  background: #fff;  
}

其余原有CSS和HTML代码无需修改，即可实现头像完整超出卡片顶部的预期效果。

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