如何为Bootstrap Cards添加分组，实现按日期归类展示卡片？

看起来你是想把关联的卡片按日期归类展示，现在所有卡片挤在同一行的问题，主要是两方面原因：一是没有先把数据按日期分组，二是布局上没利用Bootstrap的栅格系统来控制卡片排列。我给你整理个可行的方案：

第一步：先在PHP中按日期分组数据 #

首先你需要从数据库取到数据后，把相同日期的条目归到一组，这样后续渲染的时候就能按日期批量输出卡片了。示例代码如下：

// 假设$rows是你从数据库查询到的所有数据数组
$groupedData = [];
foreach ($rows as $row) {
    // 统一日期格式，作为分组的键
    $dateKey = date("Y年m月d日", strtotime($row['Date']));
    if (!isset($groupedData[$dateKey])) {
        $groupedData[$dateKey] = [];
    }
    $groupedData[$dateKey][] = $row;
}

第二步：按分组渲染日期和卡片 #

接下来用Bootstrap的栅格系统（row + col）来控制卡片的布局，每个日期作为一个分组标题，下面排列对应日期的卡片：

<?php foreach ($groupedData as $date => $items): ?>
    <!-- 日期标题 -->
    <div class="mb-4">
        <h5 class="bg-light p-3 rounded">
            <i class="material-icons align-middle">today</i>
            <span class="align-middle"><?php echo $date; ?></span>
        </h5>
        <!-- 卡片容器：用row来包裹一行的卡片 -->
        <div class="row g-3 mt-2">
            <?php foreach ($items as $item): ?>
                <!-- 每个卡片占的宽度：比如md屏幕下占4列，lg下占3列，根据需求调整 -->
                <div class="col-md-4 col-lg-3">
                    <div class="card h-100">
                        <div class="card-body">
                            <!-- 卡片内容，替换成你原本的内容即可 -->
                            <h6 class="card-title"><?php echo $item['Title']; ?></h6>
                            <p class="card-text"><?php echo $item['Content']; ?></p>
                        </div>
                    </div>
                </div>
            <?php endforeach; ?>
        </div>
    </div>
<?php endforeach; ?>

关键说明 #

• 分组逻辑：通过把相同日期的数据归到同一数组项，确保每个日期只显示一次标题，下面跟着所有对应卡片。
• 布局控制：用row和col-*类来控制卡片的排列，g-3是Bootstrap的间距类，让卡片之间有合适的空隙；h-100让同组的卡片高度一致，看起来更整齐。
• 如果你原来的卡片有自定义样式，直接替换掉示例里的card-body内容就行。

这样调整后，每个日期分组会单独成块，同日期的卡片会按你设置的列数排列，不会再全部挤在同一行啦。

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