Html 为什么我的引导卡彼此对齐，而不是并排对齐？

我的引导卡没有并排对齐，我似乎找不到我的错误。我正在使用django和html

{% extends 'base.html' %}
<div>
    {% block content %}
        <h1>Players<h1>
        {% for player in players %}
            <div class="row">
                    <div class="column">
                        <div class="card" style="width: 18rem;">
                        <img class="card-img-top" src="{{ player.image_url }}">
                          <div class="card-body">
                            <h5 class="card-title">{{ player.name }}</h5>
                            <p class="card-text">{{ player.position }}</p>
                            <a href="#" class="btn btn-primary">Know More!</a>
                          </div>
                        </div>
                    </div>
            </div>
        {% endfor %}
    {% endblock %}
</div>

{%extends'base.html%}
{%block content%}
球员
{玩家中的玩家为%}
{{player.name}
{{player.position}
{%endfor%}
{%endblock%}

试试这个

使用引导网格

{%extends'base.html%}
{%block content%}
球员
{玩家中的玩家为%}
{{player.name}
{{player.position}
{%endfor%}
{%endblock%}

试试这个

使用引导网格

{%extends'base.html%}
{%block content%}
球员
{玩家中的玩家为%}
{{player.name}
{{player.position}
{%endfor%}
{%endblock%}

非常感谢，非常感谢兄弟

{% extends 'base.html' %}
<div>
   {% block content %}
   <h1>
   Players
   <h1>
   <div class="row">
      {% for player in players %}
      <div class="col-auto col-md-3">
         <div class="column">
            <div class="card" style="width: 18rem;">
               <img class="card-img-top" src="{{ player.image_url }}">
               <div class="card-body">
                  <h5 class="card-title">{{ player.name }}</h5>
                  <p class="card-text">{{ player.position }}</p>
                  <a href="#" class="btn btn-primary">Know More!</a>
               </div>
            </div>
         </div>
      </div>
      {% endfor %}
   </div>
   {% endblock %}
</div>