本文介绍为何直接用 Jinja 循环控制 容易出错，并推荐使用 Bootstrap 5.3 的响应式网格卡片（Grid Cards）替代方案，实现等高、自适应、无需手动分组的卡片布局。

本文介绍为何直接用 jinja 循环控制 `

` 容易出错，并推荐使用 Bootstrap 5.3 的响应式网格卡片（Grid Cards）替代方案，实现等高、自适应、无需手动分组的卡片布局。

Bootstrap 的 card-group 组件要求所有子卡片严格等宽且高度一致——当最后一组卡片数量不足（如仅剩1张），剩余卡片会异常拉伸以填满整行，破坏视觉一致性。而 Jinja 中手动计数分组（如每4个 <div class="card"> 包裹进一个 <code>card-group）不仅逻辑冗余，还极易因闭合标签错位、边界条件遗漏（如空列表、总数非4倍数）导致 HTML 结构损坏。

更优解是采用 Bootstrap 官方推荐的 Grid Cards 模式：利用 .row + .row-cols-* + .col 系统实现语义化、响应式、免分组的卡片网格。该方案天然支持断点适配，且通过 h-100 确保所有卡片高度统一，无需任何循环计数逻辑。

以下为完整可运行示例（适配 Bootstrap 5.3+）：

<div class="row row-cols-1 row-cols-sm-2 row-cols-md-4 g-4">
  {% for vid in videos %}
  <div class="col">
    <div class="card h-100">
      @@##@@
      <div class="card-body">
        <h5 class="card-title">{{ vid.title | truncate(30) }}</h5>
        <p class="card-text">{{ vid.description | truncate(100) }}</p>
      </div>
      <div class="card-footer bg-white border-0 pt-0">
        <small class="text-body-secondary">上传于 {{ vid.upload_date }}</small>
      </div>
    </div>
  </div>
  {% endfor %}
</div>

✅ 关键优势说明：

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

• row-cols-1 → 移动端单列；row-cols-sm-2 → 平板双列；row-cols-md-4 → 桌面端四列，自动响应
• g-4 提供统一间距（gap），替代旧版 margin 手动控制
• h-100 使所有卡片高度随内容最长项对齐，避免参差
• 无须 Jinja 计数器、无须手动开闭 div，模板简洁健壮

⚠️ 注意事项：

• 确保已引入 Bootstrap 5.3+ CSS（CDN 或本地构建）；
• 若需卡片悬停动效，可额外添加 class="card h-100 shadow-sm" 并配合 :hover CSS；
• videos 列表为空时，整个 <div class="row"> 将自然不渲染，无需额外 <code>{% if videos %} 判断（Jinja 的 for 循环本身安全）。

  综上，放弃手动分组思维，拥抱 Bootstrap 原生网格系统，是实现灵活、可维护、专业级卡片布局的正确路径。