Как автоматически построить 3 столбца карт внутри строки html-интерфейса - PullRequest
Новая
       27

Как автоматически построить 3 столбца карт внутри строки html-интерфейса

0 голосов
/ 20 апреля 2019

Я новичок в Django, и я тоже изучаю HTML.

Итак, я хочу задать простой вопрос (возможно).

Я занимаюсь разработкой небольшого проекта в Django, иУ меня проблема с интерфейсом.В частности, в части HTML.

, как вы можете видеть на картинке, я занимаюсь разработкой электронной коммерции.Но у меня есть ошибка в моей части HTML.Я не хочу показывать карточки статей в виде списка строк, например изображения.

enter image description here

Я хочу показывать статьи по три карточки по столбцам, автоматически выполняемые при добавлении новой статьи.

Точно так же, как этодругая картинка (сделанная из краски: P):

enter image description here

Это мой HTML, к этой части: 

<div class="row">
  <div class="col-lg-7">
    <h5>Tipo de vista:<button class="btn btn-lg" type="reset""><a href="{% url 'adminview:article' %}"><h6>Lista</h6></button></a>/<button class="btn btn-lg" type="reset""><a href="{% url 'adminview:cuadricula' %}"><h6>Cuadrícula</h6></button></a></button></button></h5>
    <div class="card mb-8">
      <div class="card-header">
        <i class="fas fa-chart-bar"></i>
      Productos disponibles</div>
      <div class="card-body">
        <div class="table-responsive">
          <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
            {% if articulo %}
            {% for articulo in articulo %}
            <div class="col-lg-4 col-md-6 mb-4">
              <div class="card h-100 w-100">
                <a href="article/id/{{ articulo.id }}"><img class="card-img-top" src="{% url 'home:preload_image' pk=articulo.pk %}" alt=""></a>
                <div class="card-body">
                  <h4 class="card-title">
                    <hr class="sidebar-divider">
                    <a href="article/id/{{articulo.id}}">{{articulo.nombre_producto}}</a>
                  </h4>
                  <h5>{{articulo.precio}} bsS</h5>
                  <p class="card-text">{{articulo.Descripcion}}</p>
                </div>
                <div class="card-footer">
                  {% if articulo.valoracion == 0 %}
                  <span class="text-warning">&#9734; &#9734; &#9734; &#9734; &#9734;</span>
                  <h6>{{articulo.id_clasificacion_fk}}</h6>
                  <h6>Sin valoración</h6>
                  {% endif %}
                  {% if articulo.valoracion == 1 %}
                  <span class="text-warning">&#9733; &#9734; &#9734; &#9734; &#9734;</span>
                  <h6>{{articulo.id_clasificacion_fk}}</h6>
                  {% endif %}
                  {% if articulo.valoracion == 2 %}
                  <span class="text-warning">&#9733; &#9733; &#9734; &#9734; &#9734;</span>
                  <h6>{{articulo.id_clasificacion_fk}}</h6>
                  {% endif %}
                  {% if articulo.valoracion == 3 %}
                  <span class="text-warning">&#9733; &#9733; &#9733; &#9734; &#9734;</span>
                  <h6>{{articulo.id_clasificacion_fk}}</h6>
                  {% endif %}
                  {% if articulo.valoracion == 4 %}
                  <span class="text-warning">&#9733; &#9733; &#9733; &#9733; &#9734;</span>
                  <h6>{{articulo.id_clasificacion_fk}}</h6>
                  {% endif %}
                  {% if articulo.valoracion == 5 %}
                  <span class="text-warning">&#9733; &#9733; &#9733; &#9733; &#9733;</span>
                  <h6>{{articulo.id_clasificacion_fk}}</h6>
                  <h6>Artículo destacado!</h6>
                  {% endif %}
                  <a href="{% url 'article:show_article' id_article=articulo.pk %}"><img src="{% static 'img/verify.png'%}"width="40px" height="40px" /></a>
                  <a href="product/edit/{{articulo.id}}"><img src="{% static 'img/edit.png'%}"width="40px" height="40px" /></a>
                  <a href="delete_article/{{articulo.id}}"><img src="{% static 'img/delete.png'%}"width="40px" height="40px" /></a>
                </div>
              </div>
            </div>
            {% endfor %}
            {% endif %}
            {% else %}
            <div class="col-lg-4 col-md-6 mb-4">
              <h5>No hay artículos disponibles.</h5></div>
              {% endif %}
            </div>
          </table>
          <div class="row">
            <div class="col-lg-5 mt-4 mb-3">
              <a href="{% url 'adminview:add_article' %}" class="btn btn-primary btn-user btn-block"><img src="{% static 'img/plus.png'%}"width="20px" height="20px" />
                Añadir nuevo producto
              </a>
            </div>
          </div>
        </div>
        <canvas id="myBarChart" width="100%" height="0"></canvas>
      </div>
    </div>
  </div>

Inпростыми словами, у меня это как первое изображение, и я хочу, чтобы оно было как второе.

Я использую простую тему начальной загрузки.

Надеюсь, вы мне поможете !.

...