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 %}

{%extends“base.html”%}
{%block content%}
{%if status%}
**{状态为%的状态为%}**
{{status.username}
{{status.liography}
{%endfor%}
{%else%}
没有状态
{%endif%}
{%endblock%}

---

然而，我希望这些卡片并排出现，但是它们正在为从数据库获取的所有状态或条目堆叠

我认为您的{%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 %}

{%extends“base.html”%}
{%block content%}
{%if status%}
**{状态为%的状态为%}**
{{status.username}
{{status.liography}
{%endfor%}
{%else%}
没有状态
{%endif%}
{%endblock%}

您是否将

.container

和

.row

包含在

循环输出中？如果

输出，尝试将其移动到

{%extends“base.html”%}
{%block content%}
{%if status%}
**{状态为%的状态为%}**
{{status.username}
{{status.liography}
{%endfor%}
{%else%}
没有状态
{%endif%}
{%endblock%}
您先到了那里。。。干得好+1我的浏览器显示您先回答：）您确实回答了，因为我在回答时弹出了它，说添加了新的答案。虽然我似乎无法让一个像样的代码高亮器工作，但我尝试了强制使用
lang py
和
lang python
，但在第一次
之后。容器
高亮显示会停止。非常感谢。@RokKlancar@joshmoto--谢谢