为什么我的引导卡相互对齐，而不是并排对齐？答案

【问题标题】：Why are my bootstrap cards aligned on top of each other and not aligned side by side?为什么我的引导卡相互对齐，而不是并排对齐？
【发布时间】：2021-06-27 09:10:48
【问题描述】：

我的引导卡没有并排对齐，我似乎找不到我的错误。我正在使用 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>

【问题讨论】：

标签： html django bootstrap-4

【解决方案1】：

试试这个

使用引导网格https://getbootstrap.com/docs/4.0/layout/grid/

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

【讨论】：

非常感谢兄弟