时间戳

首页 > 解决方案 > 如何创建卡片网格视图 HTML、CSS 和 Flask

html - 如何创建卡片网格视图 HTML、CSS 和 Flask

问题描述

我正在使用 index.html 文件中的代码。

    {% for post in blog_posts.items %}

    <div class="col-sm-6">
      <div class="card" >

        <div class="card-body">

          <h2><a class="card-title" href="  {{ url_for('blog_posts.blog_post', blog_post_id=post.id) }}">{{ post.title }}</a></h2>
          <a href="{{ url_for('users.user_posts', username=post.author.username) }}">Written By: {{ post.author.username }}</a>
          <p>Published on: {{ post.date.strftime('%Y-%m-%d') }}</p>
          <p class="card-text">{{ post.text[:100] }}...</p>
          <a href="{{ url_for('blog_posts.blog_post', blog_post_id=post.id) }}" class="btn btn-primary">Read Blog Post</a>

        </div>
      </div>
    </div>

   {% endfor %}

我对 bootstrap 的理解是它会创建一个 6 列网格，但它只是在下一张卡片下面堆叠一张卡片。我确定这是我缺少的东西。谢谢您的帮助。 在此处输入图像描述

标签： htmlcssflaskgridview

解决方案

您可能需要使用卡片组或卡片组来实现此目的：

我会失去这个div：

<div class="col-sm-6">

然后将for循环放在一个card-groupdiv中：

<div class='card-group'>
    {% for post in blog_posts.items %}
      <div class="card" >
        <div class="card-body">
          ...
        </div>
    </div>
  {% endfor %}
</div>

如果你想要卡片之间有一些间距，你可以将外部 div 的类更改为card-deck.

有关更多选项，请参阅卡片文档。

推荐阅读