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

Question

我正在使用 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 列网格，但它只是将一张卡片堆叠在另一张卡片下方。我确定这是我所缺少的。谢谢您的帮助。

Answer 1

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

我会失去这个 div:

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

然后将 for 循环放入 card-group div:

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

如果你想要卡片之间有一些间距，你可以把外面div的class改成card-deck。

有关更多选项，请参阅 Card docs。

Answer 2

.col-sm-6{ display: flex } 将此 css 属性添加到包含所有卡片的父级。

或者你可以使用浮点数.col-sm-6 > .card{ float: left}

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

How do I create a card grid view HTML, CSS and Flask

html

css

gridview

flask