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

但是不保持布局，卡不遵循这一点。我的显示页面在位置卡5，卡6，卡7上没有卡，然后在卡13和卡14上类似。对于某些行序列，保持格式，但随后它再次在随机行中被分散。

如何解决这个问题？

Answer 1

看看你的电影数组它可能有一些空值

Answer 2

JSFiddel Demo

你可以尝试创建一个<div class="row">，并在里面放入尽可能多的卡片，这个类class="col-6 col-xl-4 col-lg-4 col-md-4 col-sm-6 col-xs-4 pb-3"将使它响应....

这是一个基本的响应式Card结构

<div class="col-6 col-xl-4 col-lg-4 col-md-4 col-sm-6 col-xs-4 pb-3">
  <div class="card">
     <img class="card-img-top" src="https://vignette.wikia.nocookie.net/blogclan-2/images/b/b9/Random-image-15.jpg/revision/latest?cb=20160706220047" alt="Car">
     <div class="card-body">
       <h5 class="card-title">Title</h5>
       <p class="card-text">Price</p>
     </div>
  </div>
</div>