Bootstrap中CSS卡片横向并排重叠、float类不生效问题求解

• 自定义CSS给.container写死了4000px宽度，覆盖了Bootstrap原生响应式容器的默认规则，直接破坏了栅格系统的计算逻辑。
• .card-white设置了固定400px宽度+20px外边距，而你使用的col-md-3类单栏宽度仅为容器的25%，无法容纳固定尺寸的卡片，内容溢出直接导致重叠。
• 你错误地将float-left/float-right类加在了卡片内部的图片标签上，这些类根本无法控制外层卡片的排列；且Bootstrap 5不存在float-center这个工具类，浮动本身也不是实现Bootstrap栅格并排的正确方案，框架原生的Flex栅格完全不需要手动添加浮动。
• 直接给.card-white设置margin:20px会打乱栅格的盒模型计算：Bootstrap栅格的列间距是通过行的负边距+列的内边距实现的，自定义外边距很容易撑破列宽造成错位。
• 图片写死360px固定宽高，无法适配不同宽度的卡片容器，小尺寸下容易溢出。

1. 删除自定义样式中.container的固定宽度设置，直接复用Bootstrap原生容器的响应式宽度，需要全宽布局可以替换为Bootstrap自带的.container-fluid类。
2. 移除.card-white的固定宽度和外边距，让卡片自动撑满所在栅格列的宽度，列间距通过Bootstrap原生的gutter类控制，不需要手动写margin。
3. 删除图片标签上错误添加的所有float类，将图片宽度设为100%适配卡片宽度，移除固定宽高设置，保留object-fit: cover保证图片比例。
4. 调整栅格列配置：三张卡片并排时桌面端使用col-md-4类（12栅格等分3份，单份占4格），给行标签添加g-4类控制列之间的统一间距。

CSS部分 #

.card-white {
  background: white;
  box-shadow: 0 0 16px rgba(0, 0, 0, 0.1);
  border-radius: 50px;
  text-align: center;
  padding: 24px;
  height: 100%; /* 让同排卡片高度统一 */
}

.card-white img {
  width: 100%; /* 图片宽度适配卡片容器 */
  aspect-ratio: 1/1; /* 保持正方形比例，替代固定宽高 */
  object-fit: cover;
  border-radius: 4px;
  margin-bottom: 16px;
}

HTML部分 #

<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous">
</script>

<!-- Body -->
<div class="container py-4">
  <!-- g-4类控制列之间的统一间距 -->
  <div class="row g-4">
    <!-- 移动端全宽、平板端半宽、桌面端1/3宽，自动响应式排布 -->
    <div class="col-12 col-sm-6 col-md-4">
      <div class="card-white">
        <img src="https://via.placeholder.com/200.jpg">
        <h3>Film Showreel</h3>
      </div>
    </div>
    <div class="col-12 col-sm-6 col-md-4">
      <div class="card-white">
        <img src="https://via.placeholder.com/200.jpg">
        <h3>Monologue Showreel</h3>
      </div>
    </div>
    <div class="col-12 col-sm-6 col-md-4">
      <div class="card-white">
        <img src="https://via.placeholder.com/200.jpg">
        <h3>Voice reel</h3>
      </div>
    </div>
  </div>
</div>

修复后三张卡片会在≥576px宽度的屏幕下两列排布、≥768px宽度下自动三等分并排，自带统一间距，不会出现重叠问题，同时保留小屏移动端的堆叠适配效果。

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