如何创建卡片网格视图 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 的类更改为card-deck。

请参阅Card docs 了解更多选项。

Answer 2

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

您也可以使用浮点数.col-sm-6 > .card{ float: left}