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>

引导卡不维护行列格式

2 个答案: