Question

我是django的新人，我也在学习html。

所以，我想做一个简单的问题（也许）。

我正在django开发一个小项目，并且前端部分有问题。尤其是在HTML部分中。

您可以在图片中看到

我正在开发一种电子商务。但是我的HTML部分有一个错误。我不想像行列表一样显示文章的卡片，如图像。

我想按列显示3张卡片文章，当我添加新文章时自动完成。

就像另一幅图片（由油漆：P制成）：

这是我的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>

用简单的话来说，我实际上像第一个图像一样拥有它，而我想要像第二个图像一样。

我正在使用简单的引导程序主题。

希望您能帮助我！。

Answer 1

只需尝试向表标签添加行类

如何在一行HTML前端中自动构建3列卡

1 个答案: