如何利用Bootstrap每行3篇布局展示数据库中的大量文章？

我看了你的代码，要实现每行3篇文章的布局，核心是利用Bootstrap的12列网格系统调整列宽，同时完善卡片结构让页面更规整美观。这里给你修正后的完整代码：

<div class="container">
  <h1 class="mt-4 mb-4 text-center display-4">All News</h1>
  <div class="row g-4"> <!-- g-4 为列之间添加均匀间距 -->
    {% for article in articles %}
      <div class="col-md-4 col-sm-6 col-12"> <!-- 响应式适配：桌面3列/平板2列/手机1列 -->
        <div class="card h-100"> <!-- h-100 强制所有卡片等高，避免布局错乱 -->
          {% if article.image_url %}
            <img src="{{ article.image_url }}" class="card-img-top" alt="{{ article.title }}">
          {% endif %}
          <div class="card-body">
            <h5 class="card-title">
              <a href="#" class="text-decoration-none text-dark">{{ article.title }}</a>
            </h5>
            <p class="card-text text-muted">{{ article.description|truncatewords:20 }}</p> <!-- 截断过长描述，保持卡片整洁 -->
          </div>
          <div class="card-footer bg-transparent border-top-0">
            <a href="#" class="btn btn-primary">Read More</a>
          </div>
        </div>
      </div>
    {% endfor %}
  </div>
</div>

关键改动说明： #

• 列宽度调整：把col-md改成col-md-4，Bootstrap网格是12列，4×3=12刚好满足每行3篇的需求。额外添加col-sm-6和col-12，实现不同屏幕尺寸的响应式适配。
• 卡片优化：
  • h-100让所有卡片高度一致，避免因内容多少导致的布局参差不齐；
  • 新增card-img-top展示文章配图（如果你的文章有图片字段），完善卡片视觉层次；
  • 用card-body包裹核心内容、card-footer放置操作按钮，符合Bootstrap卡片的规范结构；
  • 给标题链接添加样式，去掉下划线并统一文本颜色，提升可读性。
• 间距与文本处理：row添加g-4类统一列间距，用truncatewords:20（Django模板语法）截断过长描述，避免卡片高度差异过大。

这样修改后，你的文章列表就能完美实现每行3篇的布局，同时兼顾移动端的显示效果。

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