本文介绍为何直接用 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">
<img src="{{ vid.thumbnail_url | default('https://via.placeholder.com/300x180') }}"
class="card-img-top" alt="{{ vid.title }}">
<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>✅ 关键优势说明：
-
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"并配合:hoverCSS； -
videos列表为空时，整个<div class="row"> 将自然不渲染，无需额外 <code>{% if videos %}判断（Jinja 的for循环本身安全）。综上，放弃手动分组思维，拥抱 Bootstrap 原生网格系统，是实现灵活、可维护、专业级卡片布局的正确路径。
