Карты начальной загрузки не поддерживают формат столбца строки - PullRequest
Новая
       31

Карты начальной загрузки не поддерживают формат столбца строки

0 голосов
/ 14 февраля 2019

У меня есть следующий шаблон: 

<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.Для некоторой последовательности строк формат сохраняется, но затем он снова искажается в случайных строках.

Как это исправить?

Ответы [ 2 ]

0 голосов
/ 14 февраля 2019

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>
0 голосов
/ 14 февраля 2019

извлеките массив фильмов, в нем может быть какое-то пустое значение

...