Bootstrap堆叠卡片问题：图片适配异常与滚动功能失效求助

问题1：卡片背景图片仅hover时正常显示 #

• 核心原因：默认状态下未给卡片设置背景图片的适配属性，仅在hover伪类中定义了background-size等样式，导致初始状态下图片无法适配卡片尺寸。
• 修复代码：
  将背景图片的核心适配属性移到卡片基础样式中，hover时仅保留需要变化的效果（比如缩放、透明度）：

.card {
  background-image: url('你的图片路径');
  background-size: cover; /* 确保图片完全覆盖卡片 */
  background-position: center center; /* 居中对齐图片 */
  background-repeat: no-repeat;
  /* 保留你原有的其他卡片样式，比如宽高、边框等 */
}

.card:hover {
  /* 仅保留hover时需要修改的样式，例如： */
  transform: scale(1.05);
  opacity: 0.9;
}

问题2：滚动按钮点击无反应 #

常见问题点及修复方案：

• 选择器不匹配：检查JavaScript中获取滚动容器、按钮的选择器是否与HTML结构一致，比如容器类名是否为.card-container，按钮类名是否为.prev-btn/.next-btn。
• 滚动容器样式缺失：确保滚动容器开启横向滚动：

.card-container {
  overflow-x: auto;
  white-space: nowrap; /* 让卡片横向排列 */
}

• 滚动逻辑错误：修正JavaScript的滚动逻辑，确保每次滚动距离对应卡片宽度+间距：

const cardContainer = document.querySelector('.card-container');
const prevBtn = document.querySelector('.prev-btn');
const nextBtn = document.querySelector('.next-btn');
// 获取单张卡片的实际宽度（含内外边距）
const cardScrollWidth = document.querySelector('.card').offsetWidth + parseInt(getComputedStyle(document.querySelector('.card')).marginRight);

prevBtn.addEventListener('click', () => {
  cardContainer.scrollBy({
    left: -cardScrollWidth,
    behavior: 'smooth' // 可选：开启平滑滚动
  });
});

nextBtn.addEventListener('click', () => {
  cardContainer.scrollBy({
    left: cardScrollWidth,
    behavior: 'smooth'
  });
});

• 事件被阻止：检查是否有其他脚本阻止了按钮的点击事件，比如Bootstrap的模态框、下拉组件冲突，可尝试给按钮添加event.stopPropagation()。

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