Django Bootstrap колода карт, если только oop делится на - PullRequest
Новая
       16

Django Bootstrap колода карт, если только oop делится на

0 голосов
/ 14 апреля 2020

Я пытаюсь использовать bootstrap карты. Но у меня есть проблема. Когда я добавляю новый пост, который будет отображаться как карточка, и я отображаю больше 5, они начинают уменьшаться Я пытался использовать счетчик forl oop для запуска новой строки каждый раз, когда на ней отображается более 5 карт. Но я делаю что-то не так. Я все читаю и везде одно и то же. Но я точно делаю это неправильно. 

     <div class="card-deck">
    {% for post in post_list %}
    {% if forloop.counter0|divisibleby:3 %}
      <div class="card border-primary mb-3" style="max-width: 20rem;">
          <a href="{% url 'post_detail' post.slug  %}">
              <img style="height: 200px; width: 100%; display: block;" src="{{ post.thumb.url }}" alt="Card image"></a>
                  <div class="card-header">Header</div>
                      <div class="card-body">
                      <h4 class="card-title">{{ post.title }}</h4>
                      <p class="card-text">{{post.content|slice:":200" }}</p>
                      </div>
      </div>   {% endif %}    
  </div>      
 </div>  {% endfor %}

Контрольное изображение

1 Ответ

0 голосов
/ 14 апреля 2020

Теперь вы видите только каждую третью карту (из-за "divisibleby: 3"). Я не совсем уверен, чего вы хотите достичь, но если вы хотите показать все карты, есть несколько вариантов. Две из них - это группы карт (https://getbootstrap.com/docs/4.0/components/card/#card -групп ) и колоды карт (https://getbootstrap.com/docs/4.0/components/card/#card -деки ), но они действительно запутываются, когда количество карт увеличивается. Решение, которое я использовал с успехом, использует сетку Bootstrap. Карты автоматически переносятся в следующий ряд, когда область просмотра меньше или количество карт больше. Код ниже должен работать (еще не проверял): 

div class="container-fluid">
    <div class="row">
        {% for post in post_list %}
            <div class="col-auto">
                <div class="card border-primary mb-3">
                    <a href="{% url 'post_detail' post.slug  %}">
                        <img style="height: 200px; width: 100%; display: block;" src="{{ post.thumb.url }}" alt="Card image">
                    </a>
                    <div class="card-header">
                        Header
                    </div>
                    <div class="card-body">
                        <h4 class="card-title">{{ post.title }}</h4>
                        <p class="card-text">{{ post.content|slice:":200" }}</p>
                    </div>
                </div>
            </div>
        {% endfor %}
    </div>
</div>
...