html - Bootstrap 卡不维护行列格式

Question

我有以下模板:

<center>
      <form class="site-form" action="{% url 'movie:recommend'%}" method="post">
        {% csrf_token %}
        <input style="font-color:#000000;color: #008000" type="Submit" value="Recommend">
  </center>
  <br></br>
  <div class ="container">
            <div class="row">
        {% for movie in movies %}


        <div class="col-md-4 col-lg-3">
        <div class="card h-12">
        <div class="card-deck">

            <div class="card text-center" style="width:20rem;">
            <img class="card-img-top" src="{{movie.img_url}}" alt="Card image cap">
            <div class="card-body">
            <h5 class="card-title">{{movie.title}}</h5>
            <a href="{% url 'movie:explore' movie.id %}" class="btn btn-dark">Explore</a>
        </div>
    </div>
        </div>
    </div>
     <br></br>
 </div>


   {% endfor %}
    </div>

卡片应该以下列格式显示:

card1  card2  card3  card4
card5  card6  card7  card8
.
.
it goes on like this

然而，布局没有得到维护，卡片也没有遵循这一点。我的显示页面在位置 card5、card6、card7 上没有卡片，然后在 card13 和 card14 上也类似。对于某些行序列，格式保持不变，但随后它再次在随机行处失真。

如何解决这个问题？

Answer 1

检查你的电影数组，它可能有一些空值