如何让数据库渲染的卡片按每行3个排列且数据不重复？

一、实现每行3个卡片的正确布局 #

放弃card-deck，改用网格布局系统（以Bootstrap为例），这是更可控且不易出错的方案：

• 外层用row容器，它会自动处理换行逻辑
• 每个卡片包裹在col-md-4（中等屏幕及以上每行3个，小屏幕自动堆叠为单列）的列容器中，同时添加mb-4给卡片增加底部间距，h-100保证同列卡片高度一致

后端渲染示例（PHP）： #

<div class="container mt-4">
  <div class="row">
    <!-- 仅遍历一次数据库返回的数据集 -->
    <?php foreach ($dataList as $item): ?>
      <div class="col-md-4 mb-4">
        <div class="card h-100">
          <img src="<?= $item['image'] ?>" class="card-img-top" alt="卡片图片">
          <div class="card-body">
            <h5 class="card-title"><?= $item['title'] ?></h5>
            <p class="card-text"><?= $item['content'] ?></p>
          </div>
        </div>
      </div>
    <?php endforeach; ?>
  </div>
</div>

前端框架示例（Vue）： #

<div class="container mt-4">
  <div class="row">
    <div class="col-md-4 mb-4" v-for="item in dataList" :key="item.id">
      <div class="card h-100">
        <img :src="item.image" class="card-img-top" alt="卡片图片">
        <div class="card-body">
          <h5 class="card-title">{{ item.title }}</h5>
          <p class="card-text">{{ item.content }}</p>
        </div>
      </div>
    </div>
  </div>
</div>

二、解决数据重复问题 #

之前用card-deck出现重复，核心原因是循环嵌套逻辑错误（比如在循环card-deck容器时，重复遍历了整个数据集）。修正要点：

• 确保仅遍历数据集一次，每个数据项仅生成一个卡片
• 若用框架渲染，必须给循环项添加唯一:key（如数据ID），避免虚拟DOM复用导致的重复渲染
• 若一定要用card-deck分组，需先将数据集按每3个一组拆分，再分别渲染每组

错误示例（导致重复的常见场景）： #

<!-- 错误：外层循环card-deck，内层重复遍历全量数据 -->
<?php for ($i=0; $i<count($dataList); $i+=3): ?>
  <div class="card-deck">
    <?php foreach ($dataList as $item): ?>
      <div class="card">...</div>
    <?php endforeach; ?>
  </div>
<?php endfor; ?>

修正后的card-deck分组逻辑： #

<div class="container mt-4">
  <?php 
  // 将数据集拆分为每3个一组
  $groups = array_chunk($dataList, 3);
  foreach ($groups as $group): 
  ?>
    <div class="card-deck mb-4">
      <?php foreach ($group as $item): ?>
        <div class="card">
          <!-- 卡片内容 -->
        </div>
      <?php endforeach; ?>
    </div>
  <?php endforeach; ?>
</div>

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