0

shop.html

{% extends 'base.html' %} 

{% block content %} 
<div class="container">
  <!-- Product List -->
  <br>
  <h2 align="center">List of Products</h2>
  <br>
  <div class="row">
  {% for product in products %} 
  <div class="col-3 col-md-3 col-sm-3">
    
    <div class="card">
      <form method="POST" action="{% url 'add_to_cart' product.id %}">
        {% csrf_token %} 
        <img src="{{ product.image.url }}" class="card-img-top" alt="...">
        <div class="card-body">
          <h5 name="item" class="card-title">{{product.name}}</h5>
            <div class="card-text">
                <p>Category: {{ product.category }}</p>
                <p>Price:</p>
                <p style="text-decoration: line-through;color:red;">{{ product.price }}</p>
                <p style="color:blue;">{{ product.discount_price }}</p>
            </div>
            <hr>
            <input name="quantity" type="number" value="1">
            <input type="submit" class="btn btn-primary" value="Add to Cart">
      </form>
      
    </div>
    
  </div>
  {% endfor %}
</div> 
</div>
  
{% endblock %}

base.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Online Shopping System</title>
    <!-- CSS only -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
</head>
<body>
    {% include 'navbar.html' %} 
    {% block content %} {% endblock %} 
    <!-- JavaScript Bundle with Popper -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
    <!--  -->
</body>
</html>

引导卡网格

我检查了网络并加载了文件

对于此代码，我使用了该类col-3，并且第二个产品仍然放在第一个产品下。相反，我想把第二张产品卡放在第一张旁边。我从 Bootstrap Card Grid System 中获取了代码，但即使我已将所需的引导 css 和 javascript 链接放入base.html. 我可以问我需要改变什么才能让卡片连续 3 次吗？

4

1 回答 1

1

理想情况下，您将在声明列的行内有一个容器 div，然后是一行（在这种情况下，我们使用大小 3 表示列）。让我知道它是否有帮助。

<div class="container">
    <!-- Product List -->
    <div class="row justify-content-center">
    {% for product in products %} 
    <div class="col-3 col-md-3 col-sm-3">
      
      <div class="card">
        <form method="POST" action="{% url 'add_to_cart' product.id %}">
          {% csrf_token %} 
          <img src="{{ product.image.url }}">
          <div class="card-body">
            <h5 name="item" class="card-title">{{product.name}}</h5>
              <div class="card-text">
                  <p>Category: {{ product.category }}</p>
                  <p>Price:</p>
                  <p style="text-decoration: line-through;color:red;">{{ product.price }}</p>
                  <p style="color:blue;">{{ product.discount_price }}</p>
              </div>
              <hr>
              <input name="quantity" type="number" value="1">
              <input type="submit" class="btn btn-primary" value="Add to Cart">
        </form>
        
      </div>
      
    </div>
    {% endfor %}
</div> 
  </div>
于 2021-09-05T07:53:31.487 回答