Bootstrap: выровнять карту по горизонтали как один ряд - PullRequest
Новая
       16

Bootstrap: выровнять карту по горизонтали как один ряд

0 голосов
/ 21 марта 2020

Я отрисовываю 4 элемента подряд через a для l oop, проблема в том, что в первой строке отображается 4 элемента, а остальные элементы, входящие в l oop, отображаются в отдельных line.

code 

<div class="card-group">

    {% for item in wt %}

          <div class="card my-3 text-white bg-dark mb-3" style="width: 18rem;">

            <img src="/media/{{item.thumbnail}}" class="card-img-top" alt="...">
            <div class="card-body">
              <h5 class="card-title">{{item.product_name}}</h5>
              <p class="card-text">{{item.thumbnail_desc}}</p>

              <a href="blog_detail/{{item.post_id}}" class="btn btn-primary">View Product</a>


            </div>
          </div>

    {% if forloop.counter|divisibleby:4 %}
    </div>
    {% endif %}

   {% endfor %}

здесь я использую bootstrap и django framework ... я также использовал класс "row", но он также не делает работают очень хорошо

Ответы [ 2 ]

0 голосов
/ 22 марта 2020

это работало, изменяя размер карты, а также добавляя счетчик forl oop ... основной проблемой был размер карты, она не помещалась в контейнер 

<h2 class="my-4 text-white bg-dark">New Arrivals</h2>
            <div class="row">
         {% for item in wt %}

          <div class="card text-white bg-dark mb-3" style="width: 10rem;">

            <img src="/media/{{item.thumbnail}}" class="card-img-top" alt="...">
            <div class="card-body">
              <h5 class="card-title">{{item.product_name}}</h5>
              <p class="card-text">{{item.thumbnail_desc}}</p>

              <a href="detail/{{item.post_id}}" class="btn btn-primary">View Product</a>


            </div>
          </div>
                 {% if forloop.counter|divisibleby:4 %}
    </div>
        <div class="row">
    {% endif %}

   {% endfor %}

        </div>
0 голосов
/ 21 марта 2020

Это должно автоматически делать 4 к строке без добавления дополнительного кода: 

    {% for item in wt %}

          <div class="card my-3 text-white bg-dark mb-3" style="width: 18rem;">

            <img src="/media/{{item.thumbnail}}" class="card-img-top" alt="...">
            <div class="card-body">
              <h5 class="card-title">{{item.product_name}}</h5>
              <p class="card-text">{{item.thumbnail_desc}}</p>

              <a href="blog_detail/{{item.post_id}}" class="btn btn-primary">View Product</a>


            </div>
          </div> 
   {% endfor %}

Если нет, попробуйте использовать класс "col-md-3" вместо "my-3".

Дайте мне знать, если это поможет.

...