python实现flask横向排布卡片

### 实现横向卡片布局

为了实现在网页上显示横向排列的卡片，可以利用Bootstrap框架中的栅格系统来轻松完成此操作。具体来说，在`todoapp.py`文件中定义路由函数并返回渲染模板时传递数据给前端[^1]。

@app.route('/')
def index():
    return render_template('index.html', todos=Todo.query.order_by(Todo.pub_date.desc()).all())

在HTML模板(`index.html`)里，则应用Bootstrap类创建响应式的水平卡片组：

<div class="container">
  <div class="row row-cols-1 row-cols-md-3 g-4"> <!-- 设置每行最多三张卡片 -->
    {% for todo in todos %}
      <div class="col">
        <div class="card h-100">
          <img src="{{ url_for('static', filename='images/sample.jpg') }}" class="card-img-top" alt="...">
          <div class="card-body">
            <h5 class="card-title">{{ todo.title }}</h5>
            <p class="card-text">{{ todo.text|truncate(100) }}</p> <!-- 截取描述文字长度 -->
          </div>
          <div class="card-footer text-muted">
            {{ todo.pub_date.strftime('%Y-%m-%d %H:%M') }}
          </div>
        </div>
      </div>
    {% endfor %}
  </div>
</div>

上述代码片段展示了如何通过循环遍历传入的数据列表todos，并为每个项目生成带有图片、标题以及发布时间等内容的一致样式卡片组件。同时设置了`.row-cols-*`类来自适应不同屏幕尺寸下的列数变化。

对于CSS部分，默认采用Bootstrap内置样式即可满足需求；如果希望进一步自定义外观效果，可以在项目的静态资源目录下添加额外的样式表文件，并引入特定的选择器覆盖默认设置。