时间戳

首页 > 解决方案 > 为什么引导卡不能并排对齐

html - 为什么引导卡不能并排对齐

问题描述

我正在开发一个 Flask 项目，我在引导卡上显示来自数据库的用户信息。我正在使用 jinja2 循环对象状态

{% extends "base.html" %}

{% block content %}
  {% if statuses %}
      **{% for status in statuses %}**
          <div class="container">
              <div class="row mt-4">
                <div class="col-sm-3">
                  <div class="card">
                    <img src="{{ url_for('static', filename='img/no_profile.jpg')}}" class="card-img-top" alt="...">
                    <div class="card-body">
                    <h5 class="card-title">{{ status.username }}</h5>
                    <p class="card-text">{{ status.biography }}</p>
                    <a href="#" class="btn btn-primary">{{ status.interests }}</a></div>
                  </div>
                </div>
              </div>
            </div>
      {% endfor %}
  {% else %}
      <h2>There are no statuses</h2>
  {% endif %}
{% endblock %}

但是，我希望这些卡片并排出现，但它们正在堆叠从数据库快照中获取的所有状态或条目，以了解图像的输出方式

标签： htmlcssbootstrap-4jinja2

解决方案

我认为你把你的 {% forloop %} 放得太早了。尝试这个：

{% extends "base.html" %}

{% block content %}
  {% if statuses %}
          <div class="container">
              <div class="row mt-4">
          **{% for status in statuses %}**
                <div class="col-sm-3">
                  <div class="card">
                    <img src="{{ url_for('static', filename='img/no_profile.jpg')}}" class="card-img-top" alt="...">
                    <div class="card-body">
                    <h5 class="card-title">{{ status.username }}</h5>
                    <p class="card-text">{{ status.biography }}</p>
                    <a href="#" class="btn btn-primary">{{ status.interests }}</a></div>
                  </div>
                </div>
          {% endfor %}
              </div>
            </div>
  {% else %}
      <h2>There are no statuses</h2>
  {% endif %}
{% endblock %}

推荐阅读