Bootstrap卡片无法正常排列，窗口缩放时出现重叠问题求助

嘿，我仔细看了你的代码，发现几个关键问题导致卡片在缩放时重叠，咱们一步步来修复：

问题分析 #

1. Bootstrap网格列未正确设置宽度：你用了col-sm-6 col-md，但col-md后面没有指定宽度值（比如col-md-4），这会让Bootstrap无法在中等屏幕及以上尺寸正确分配列的宽度，导致卡片挤在一起。
2. 图片与卡片尺寸冲突：卡片设置了max-width:264px，但图片的max-width:320px，这会让图片超出卡片容器，破坏整体布局结构。
3. 底部图标定位错误：.bottom-icons的bottom:-300px会把元素推到卡片外部很远的位置，可能干扰其他卡片的布局空间。
4. 卡片容器高度未自适应：当前卡片的高度依赖图片和绝对定位元素，容易出现布局塌陷。

修复后的代码 #

HTML部分

<div class="col-sm-6 col-md-4 mt-3"> <!-- 补充col-md的宽度值，这里用col-md-4为例，可根据需求调整 -->
  <div class="card">
      <a href="#" class="card-img-link"> <!-- 把内联样式移到CSS里，更易维护 -->
          <img src="https://images.igdb.com/igdb/image/upload/t_cover_big/co7lbb.png" alt="游戏封面">
      </a>
      <div class="icon-placeholder">
          <!-- 左上角爱心图标 -->
          <i id="heart" class="fas fa-heart heart-icon top-left-icon"></i>
          <!-- 底部图标组 -->
          <div class="bottom-icons">
              <i class="fas fa-comment comment-icon p-2"></i>
              <i class="fas fa-share share-icon p-2"></i>
              <!-- 可添加更多图标 -->
          </div>
      </div>
  </div>
</div>

CSS部分

/* 先修复卡片基础样式 */
.card {
  position: relative;
  border-radius: 20px;
  background-color: #ffffff00;
  max-width: 264px;
  /* 去掉固定max-height，让卡片自适应内容 */
  transition: transform .2s;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  overflow: hidden; /* 确保图片和元素不会溢出卡片 */
}

/* 卡片图片链接样式 */
.card-img-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.card img {
  border-radius: 20px;
  width: 100%; /* 改成100%，继承卡片宽度 */
  max-height: 320px;
  object-fit: cover;
  display: block;
  pointer-events: auto; /* 让图片能响应点击 */
}

.icon-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
  z-index: 3;
}

.bottom-icons {
  display: flex;
  justify-content: center; /* 让底部图标居中 */
  gap: 10px; /* 给图标之间加间距 */
}

/* 可选：卡片hover效果 */
.card:hover {
  transform: translateY(-5px);
}

关键修改说明 #

• 给Bootstrap列补充了col-md-4，确保在中等屏幕上一行显示3张卡片，小屏幕显示2张，符合网格布局逻辑。
• 把图片的max-width改成100%，让图片自适应卡片宽度，避免溢出。
• 移除了.bottom-icons的错误bottom和left值，改用justify-content: center让图标居中显示在卡片底部。
• 给卡片添加了overflow: hidden，防止内部元素溢出破坏布局。
• 把内联样式移到CSS中，提升代码可维护性。

这样修改后，卡片在窗口缩放时应该就能正常排列，不会出现重叠问题了，你可以试试调整col-md-*的数值来改变一行显示的卡片数量哦！

备注：内容来源于stack exchange，提问作者Luis Pereira