引导卡不保持行列格式答案

【问题标题】：Bootstrap cards not maintaing row column format引导卡不保持行列格式
【发布时间】：2019-07-08 08:30:31
【问题描述】：

我有以下模板：

<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 上也没有卡片。对于某些行序列，格式会保持不变，但随后会在随机行处再次失真。

如何解决这个问题？

【问题讨论】：

为什么card 嵌套在card 中？
在浏览器中检查每张卡片的宽度和高度是否保持不变，或者由于其自身的内容而得到不同的值。同时尝试删除 br br 标签。

标签： html css bootstrap-4 frontend

【解决方案1】：

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

【讨论】：

【解决方案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>

【讨论】：