为什么引导卡不能并排对齐答案

【问题标题】：Why the bootstrap card not aligning side by side为什么引导卡不能并排对齐
【发布时间】：2021-04-23 05:37:04
【问题描述】：

我正在开发一个 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 %}

但是我希望卡片并排出现，但它们正在堆叠从数据库 snapshot of how the image is coming out 获取的所有状态或条目

【问题讨论】：

标签： html css bootstrap-4 jinja2

【解决方案1】：

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

【讨论】：

我的浏览器显示你先回答:)
你确实做到了，因为我在回答它时弹出它说添加了新答案。虽然我似乎无法让一个像样的代码荧光笔工作，但尝试强制使用 lang-py 和 lang-python，但在第一次 .container 之后，高亮显示就偏离了滑雪道。
非常感谢。@Rok Klancar
@Ashford 请标记正确答案（赞成和反对按钮的绿色复选标记）

【解决方案2】：

您在for 循环输出中包含.container 和.row？尝试将它们移动到if 输出

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

【讨论】：