使用Django开发Todo App：实现Bootstrap卡片一行3个自动换行

直接利用Bootstrap的12列网格系统就能搞定，核心逻辑是把每个卡片分配到4列宽度的容器中（12÷3=4），超出后会自动换行。

具体实现步骤： #

1. 用Bootstrap的container（固定宽度）或container-fluid（全屏宽度）包裹整个待办列表区域
2. 在容器内创建row容器，用来承载所有卡片的列
3. 循环渲染待办事项时，把每个卡片放在col-md-4（可根据响应式需求调整）的列容器里

Django模板代码示例： #

<div class="container mt-4">
  <div class="row g-3"> <!-- g-3 设置列之间的间距，优化布局美观度 -->
    {% for todo in todos %}
      <div class="col-md-4"> <!-- 中等屏幕及以上每行3个，小屏幕自动堆叠为单行 -->
        <div class="card h-100"> <!-- h-100 让同列卡片高度一致，避免内容不均导致布局错乱 -->
          <div class="card-body">
            <h5 class="card-title">{{ todo.title }}</h5>
            <p class="card-text">{{ todo.description }}</p>
            <p class="card-text"><small class="text-muted">{{ todo.created_at }}</small></p>
            <!-- 这里添加待办的操作按钮，比如编辑、删除等 -->
          </div>
        </div>
      </div>
    {% empty %}
      <p class="text-center w-100">暂无待办事项</p>
    {% endfor %}
  </div>
</div>

补充说明： #

• col-md-4：表示在≥768px的屏幕上，每个列占4份宽度，刚好一行放3个；小于768px的屏幕会自动占满整行，实现响应式适配。如果需要在更大屏幕保持每行3个，可叠加col-lg-4类。
• 如果之前尝试无效，大概率是没有正确嵌套row和col结构，或者给卡片添加了浮动、自定义定位等冲突样式，检查模板结构是否符合上述嵌套规则即可。

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